+ 
+ 
@@ -28,48 +30,48 @@ themes : ['Default']
Web Content
Icons can represent types of content found on websites
-
-
Alarm
- Alarm Outline
- Browser
- Bug
- Calendar
- Calendar Outline
- Cloud
- Code
- Comment
- Comment Outline
- Comments
- Comments Outline
- Content
- Dashboard
- External Link
- External Link Square
- Feed
- History
- Home
- Idea
- Inbox
- Lab
- Mail
- Mail Outline
- Mail square
- Map
- Payment
- Privacy
- Protect
- Search
- Setting
- Settings
- Shop
- Sitemap
- Tag
- Tags
- Tasks
- Terminal
- Ticket
- Trophy
- Wifi
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -118,58 +120,58 @@ themes : ['Default']
User Actions
Icons can represent common actions a user can take
-
-
Adjust
- Archive
- Ban
- Bookmark
- Call
- Call Square
- Cloud Download
- Cloud Upload
- Compress
- Configure
- Download
- Edit
- Erase
- Exchange
- External Share
- Expand
- Filter
- Flag
- Flag Outline
- Hide
- Lock
- Mail Forward
- Pin
- Print
- Random
- Recycle
- Refresh
- Remove Bookmark
- Repeat
- Reply All
- Reply
- Retweet
- Send
- Send Outline
- Share Alternate
- Share Alternate Square
- Share
- Share Square
- Sign in
- Sign out
- Theme
- Translate
- Undo
- Unhide
- Unlock Alternate
- Unlock
- Upload
- Wait
- Wizard
- Write
- Write Square
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -228,16 +230,16 @@ themes : ['Default']
Message
Icons can alert users to the type of message being displayed
-
-
Announcement
- Flag
- Help
- Help Circle
- Info
- Info Circle
- Warning
- Warning Circle
- Warning Sign
+
+
+
+
+
+
+
+
+
+
@@ -253,15 +255,15 @@ themes : ['Default']
Users
Icons can represent types of people
-
-
Child
- Doctor
- Female
- Handicap
- Male
- Student
- User
- Users
+
+
+
+
+
+
+
+
+
@@ -278,16 +280,16 @@ themes : ['Default']
Layout Adjustment
Icons can alert users to common ways to adjust page layouts
-
-
Grid Layout
- List Layout
- Block Layout
- Zoom
- Zoom Out
- Resize Vertical
- Resize Horizontal
- Maximize
- Crop
+
+
+
+
+
+
+
+
+
+
@@ -304,37 +306,37 @@ themes : ['Default']
Objects
Icons can be used to represent common objects
-
-
Anchor
- Bar
- Bomb
- Book
- Bullseye
- Checkered Flag
- Cocktail
- Fax
- Fire Extinguisher
- Fire
- Gift
- Leaf
- Legal
- Lemon
- Life Ring
- Lightning
- Magnet
- Money
- Moon
- Plane
- Puzzle
- Rain
- Road
- Rocket
- Shipping
- Suitcase
- Sun
- Travel
- Treatment
- World
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -374,20 +376,20 @@ themes : ['Default']
Shapes
Icons can be used to create shapes
-
-
Crosshairs
- Asterisk
- Certificate
- Spinner
- Circle
- Quote Left
- Quote Right
- Ellipsis Horizontal
- Ellipsis Vertical
- Cube
- Cubes
- Circle Notched
- Circle Thin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -410,26 +412,26 @@ themes : ['Default']
Item Selection
Icons can show whether an item is included in a set
-
-
Add Circle
- Add Square
- Check Circle
- Check Circle Outline
- Check Square
- Checkmark Box
- Checkmark
- Minus Circle
- Minus
- Minus Square
- Minus Square Outline
- Move
- Plus
- Plus Square Outline
- Radio
- Remove Circle
- Remove Circle Outline
- Remove
- Selected Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -456,12 +458,12 @@ themes : ['Default']
Media
Icons can represent common media types
-
-
@@ -470,51 +472,51 @@ themes : ['Default']
Bar Chart
- Camera Retro
- Film
- Photo
- Sound
+
+
+
+
+
+
Pointers
Icons can be used to indicate a direction
-
-
Angle Double Down
- Angle Double Left
- Angle Double Right
- Angle Double Up
- Angle Down
- Angle Left
- Angle Right
- Angle Up
- Arrow Circle Down
- Arrow Circle Left
- Arrow Circle Outline Down
- Arrow Circle Outline Left
- Arrow Circle Outline Right
- Arrow Circle Outline Up
- Arrow Circle Right
- Arrow Circle Up
- Arrow Down
- Arrow Left
- Arrow Right
- Arrow Up
- Caret Down
- Caret Left
- Caret Right
- Caret Up
- Chevron Circle Down
- Chevron Circle Left
- Chevron Circle Right
- Chevron Circle Up
- Chevron Down
- Chevron Left
- Chevron Right
- Chevron Up
- Long Arrow Down
- Long Arrow Left
- Long Arrow Right
- Long Arrow Up
- Pointing Down
- Pointing Left
- Pointing Right
- Pointing Up
- Toggle Down
- Toggle Left
- Toggle Right
- Toggle Up
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -566,35 +568,35 @@ themes : ['Default']
Computer and File System
Icons can represent elements of a computer and its file system
-
-
Desktop
- Disk Outline
- File Archive Outline
- File Audio Outline
- File Code Outline
- File Excel Outline
- File
- File Image Outline
- File Outline
- File Pdf Outline
- File Powerpoint Outline
- File Text
- File Text Outline
- File Video Outline
- File Word Outline
- Folder
- Folder Open
- Folder Open Outline
- Folder Outline
- Game
- Keyboard
- Laptop
- Level Down
- Level Up
- Mobile
- Power
- Tablet
- Trash
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -631,15 +633,15 @@ themes : ['Default']
Technologies
Icons can represent common technologies
-
-
Barcode
- Css3
- Database
- Fork
- Html5
- Openid
- Qrcode
- Rss Square
+
+
+
+
+
+
+
+
+
@@ -656,20 +658,20 @@ themes : ['Default']
Rating
Icons can be used to represent users attitude towards content
-
-
Empty Heart
- Empty Star
- Frown
- Heart
- Meh
- Smile
- Star Half Empty
- Star Half
- Star
- Thumbs Down
- Thumbs Outline Down
- Thumbs Outline Up
- Thumbs Up
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -691,26 +693,26 @@ themes : ['Default']
Audio
Icons can be used to represent common ways to interact with audio
-
-
Backward
- Eject
- Fast Backward
- Fast Forward
- Forward
- Music
- Mute
- Pause
- Play
- Record
- Step Backward
- Step Forward
- Stop
- Unmute
- Video Play
- Video Play Outline
- Volume Down
- Volume Off
- Volume Up
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -738,25 +740,25 @@ themes : ['Default']
Map
Icons can be used to represent elements on a map
-
-
Building
- Building Outline
- Car
- Coffee
- Emergency
- First Aid
- Food
- H
- Hospital
- Location Arrow
- Marker
- Military
- Paw
- Space Shuttle
- Spoon
- Taxi
- Tree
- University
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -783,18 +785,18 @@ themes : ['Default']
Tables
Icons can be used to represent common actions inside a table
-
-
Columns
- Sort Alphabet Ascending
- Sort Alphabet Descending
- Sort Ascending
- Sort Content Ascending
- Sort Content Descending
- Sort Descending
- Sort
- Sort Numeric Ascending
- Sort Numeric Descending
- Table
+
+
+
+
+
+
+
+
+
+
+
+
@@ -814,34 +816,34 @@ themes : ['Default']
Text Editor
Icons can represent common actions when editing text
-
-
Align Center
- Align Justify
- Align Left
- Align Right
- Attach
- Bold
- Copy
- Cut
- Font
- Header
- Indent
- Italic
- Linkify
- List
- Ordered List
- Outdent
- Paragraph
- Paste
- Save
- Strikethrough
- Subscript
- Superscript
- Text Height
- Text Width
- Underline
- Unlink
- Unordered List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -878,15 +880,15 @@ themes : ['Default']
Currency
Icons can represent units of currency
-
-
Dollar
- Euro
- Lira
- Pound
- Ruble
- Rupee
- Won
- Yen
+
+
+
+
+
+
+
+
+
@@ -903,83 +905,83 @@ themes : ['Default']
Brands
Icons can represent logos to common brands
-
-
Adn
- Android
- Apple
- Behance
- Behance Square
- Bitbucket
- Bitbucket Square
- Bitcoin
- Codepen
- Delicious
- Deviantart
- Digg
- Dribbble
- Dropbox
- Drupal
- Empire
- Facebook
- Facebook Square
- Flickr
- Foursquare
- Git
- Git Square
- Github Alternate
- Github
- Github Square
- Gittip
- Google
- Google Plus
- Google Plus Square
- Hacker News
- Instagram
- Joomla
- Jsfiddle
- Linkedin
- Linkedin Square
- Linux
- Maxcdn
- Pagelines
- Pied Piper Alternate
- Pied Piper
- Pinterest
- Pinterest Square
- Qq
- Rebel
- Reddit
- Reddit Square
- Renren
- Skype
- Slack
- Soundcloud
- Spotify
- Stack Exchange
- Stack Overflow
- Steam
- Steam Square
- StumbleUpon Circle
- StumbleUpon
- Tencent Weibo
- Trello
- Tumblr
- Tumblr Square
- Twitter
- Twitter Square
- Vimeo
- Vine
- Vk
- Wechat
- Weibo
- Windows
- Wordpress
- Xing
- Xing Square
- Yahoo
- YouTube
- YouTube Play
- YouTube Square
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/server/files/javascript/icon.js b/server/files/javascript/icon.js
index bdb856060..2ed952bb9 100755
--- a/server/files/javascript/icon.js
+++ b/server/files/javascript/icon.js
@@ -5,19 +5,40 @@ semantic.icon.ready = function() {
// selector cache
var
- $tab = $('.tabular.menu .item'),
+ $grid = $('.ui.six.column.doubling.grid'),
+ // alias
handler
;
// event handlers
handler = {
-
+ createTable: function() {
+ var
+ $grid = $(this),
+ columnCount = 6
+ ;
+ $grid
+ .find('.column:nth-child('+columnCount+'n+1)')
+ .each(function() {
+ var
+ $group = $(this)
+ .nextAll(':lt('+ (columnCount - 1) +')')
+ .andSelf()
+ ;
+ $group.wrapAll('');
+ $group.filter('[data-content]').popup({
+ position: 'top center',
+ variation: 'large inverted',
+ delay: 300
+ });
+ })
+ .end()
+ .addClass('middle aligned internally celled')
+ ;
+ }
};
-
- $tab
- .tab()
- ;
+ $grid.each(handler.createTable);
};
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index d6f6c3422..1b7119b8a 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -960,13 +960,13 @@ body.progress.animated .ui.progress .bar {
---------------*/
#example .icon.example .grid {
- margin-top: 1.5rem;
text-align: left;
}
#example .icon.example .grid .code {
position: static;
}
-#example .icon.example .grid .column {
+#example .icon.example .grid > .row > .column {
+ height: 6em;
opacity: 0.8;
text-align: center;
color: #888888;
@@ -1016,7 +1016,7 @@ body.progress.animated .ui.progress .bar {
all 0.2s ease-out
;
}
-#example .icon.example .grid .column:hover .icon {
+#example .icon.example .grid > .row > .column:hover .icon {
color: #009FDA;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
@@ -1483,13 +1483,6 @@ body.progress.animated .ui.progress .bar {
}
}
-@media only screen and (max-width : 600px) {
- #example .icon.example .grid .column {
- width: 33.33%;
- }
-}
-
-
@media only screen and (max-width : 600px) {
#example .main.menu .borderless.item {
display: none;