gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Revert "Feature/Popover Definitions"

Browse Source
This commit is contained in:
Berkeley Martinez
2016-07-16 21:35:28 -07:00
committed by GitHub
parent ece31687fa
commit 3c1e08f894
7 changed files with 17 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
client/commonFramework/definitions.js
View File

@@ -1,176 +0,0 @@
window.common = (function(global) {
const {
$,
common = { init: [] }
} = global;
// *****************************HTML5 & CSS**********************************
// Say Hello to HTML Elements
$('.def-code').popover({title: 'Code',
content: 'Instructions for a computer. <br><br>In this case,' +
' what content to show on a webpage, and how to present it. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
$('.def-text-editor').popover({title: 'Text Editor',
content: 'A system or program that allows a user to edit text. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
$('.def-element').popover({title: 'HTML Element',
content: 'An individual component of an HTML document or web page. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Headline with the h2 Element
$('.def-html5').popover({title: 'HTML5',
content: 'A markup language used for structuring and presenting' +
' content on the World Wide Web. It is the fifth ' +
'and current version of the HTML standard. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
$('.def-browser').popover({title: 'Browser',
content: 'A web browser (commonly referred to as a browser)' +
' is a software application for retrieving,' +
' presenting, and traversing information ' +
'resources on the World Wide Web',
html: true,
placement: 'bottom',
trigger: 'focus'
});
$('.def-heading').popover({title: 'Heading',
content: 'A title at the head of a page or section. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Use CSS Selectors to Style HTML Elements
$('.def-css').popover({title: 'CSS',
content: 'Cascading Style Sheets <strong>(CSS)</strong> is a style' +
' sheet language used for describing the presentation' +
' of a document written in a markup language. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Change the Font Size of an Element
$('.def-pixel').popover({title: 'Pixel',
content: 'A pixel (a word invented from ' +
'\"picture element\") is the basic' +
' unit of programmable color on a computer display or' +
' in a computer image. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Import a Google Font
$('.def-call').popover({title: 'Call',
content: 'Also known as an HTTP request, is when a website/app' +
' requests a file from a remote source. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Add Images to your Website
$('.def-url').popover({title: 'URL',
content: 'A URL (aka Web address) is one type of Uniform Resource ' +
'Identifier (URI); the generic term for all types' +
' of names and addresses that refer to objects on the World Wide Web.',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Make Dead Links using the Hash Symbol
$('.def-jquery').popover({title: 'jQuery',
content: 'jQuery is a cross-platform JavaScript library designed to' +
' simplify the client-side scripting of HTML. jQuery ' +
'is the most popular JavaScript library in use today. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Create a Form Element
$('.def-server').popover({title: 'Server',
content: 'In computing, a server is a computer program or a device that' +
'provides functionality for other' +
' programs or devices. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// *****************************Bootstrap**********************************
// Use Responsive Design with Bootstrap Fluid Containers
$('.def-framework').popover({title: 'Framework',
content: 'a framework is defined as a package made up of a structure' +
' of files and folders of standardized code (HTML, CSS, JavaScript' +
' documents etc.) which can be used to support the development of ' +
'websites, as a basis to start building a site. ',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Add Font Awesome Icons to our Buttons
$('.def-svg').popover({title: 'SVG',
content: 'Scalable Vector Graphics are an XML-based vector image format' +
' for two-dimensional graphics with support for interactivity' +
' and animation.',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// ******************************jQuery********************************
// Learn how Script Tags and Document Ready Work
$('.def-bug').popover({title: 'Bug',
content: 'A software <strong>bug</strong> is an error, flaw, failure, ' +
'or fault in a computer program or system that causes it to produce an ' +
'incorrect or unexpected result, or to behave in unintended ways.',
html: true,
placement: 'bottom',
trigger: 'focus'
});
// Clone an Element Using jQuery
$('.def-chaining').popover({title: 'Method Chaining',
content: 'Method chaining is a common syntax for invoking multiple' +
' method calls in object-oriented programming languages, ' +
'such as JavaScript.',
html: true,
placement: 'bottom',
trigger: 'focus'
});
return common;
}(window));

1
client/less/main.less
View File

@@ -1181,4 +1181,3 @@ and (max-width : 400px) {
@import "toastr.less";
@import "map.less";
@import "wiki.less";
@import "popover.less";

34
client/less/popover.less
View File

@@ -1,34 +0,0 @@
// for Bootstrap popover
.pop-explain code{
color: #006400;
background-color: rgba(0, 255, 1, 0.24);
font-weight: normal;
}
.pop-explain::after{
content:none !important;
}
.popover{
max-width:65%;
border: 1px solid @brand-primary;
padding: 0;
border-radius: 6px 6px 0 0;
left: 15% !important;
}
.popover-title {
margin: 0;
padding: 8px 14px;
font-size: inherit;
background-color: @brand-primary;
border-radius: 5px 5px 0 0;
color: #fff;
}
.popover-content {
padding: 9px 14px;
background-color: #fff;
}
.popover.bottom > .arrow:after {
border: none;
}
.popover.bottom > .arrow {
border: none;
}