lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Updates to homepage to include network links

beta
jlukic 10 years ago
parent
7e28901534
commit
13e91566d1
8 changed files with 125 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      server/documents/collections/message.html.eco
  2. 33
      server/documents/index.html.eco
  3. 40
      server/documents/modules/dropdown.html.eco
  4. BIN
      server/files/images/learn-logo.png
  5. 44
      server/files/javascript/home.js
  6. 2
      server/files/stylesheets/docs.css
  7. 13
      server/files/stylesheets/home.css
  8. 2
      server/partials/languages.html

8
server/documents/collections/message.html.eco
View File

@ -34,11 +34,11 @@ themes : ['Default', 'GitHub', 'Google']
<p>A message with a list</p>
<div class="ui message">
<div class="header">
Welcome back!
New Site Features
</div>
<ul class="list">
<li>It's good to see you again.</li>
<li>Did you know it's been a while?</li>
<li>You can now have cover images on blog pages</li>
<li>Drafts will now auto-save while writing</li>
</ul>
</div>
</div>
@ -52,7 +52,7 @@ themes : ['Default', 'GitHub', 'Google']
<div class="header">
Have you heard about our mailing list?
</div>
<p>Get all the best inventions in your e-mail every day. Sign up now!</p>
<p>Get the best news in your e-mail every day.</p>
</div>
</div>
</div>

33
server/documents/index.html.eco
View File

@ -12,14 +12,31 @@ type : 'Semantic'
<div class="following bar">
<div class="ui page grid">
<div class="column">
<img src="/images/logo.png" class="logo">
<div class="ui logo shape">
<div class="sides">
<div class="active ui side">
<img class="ui image" src="/images/logo.png">
</div>
<div class="learn side">
<img class="ui image" src="/images/learn-logo.png">
</div>
</div>
</div>
<div class="ui large inverted right floated secondary menu">
<div class="ui language floating dropdown item" id="languages">
<i class="world icon"></i>
<div class="text">Select Language</div>
<%- @partial('languages') %>
</div>
</div>
<div class="ui large inverted secondary menu">
<div class="ui floating network dropdown item" id="languages">
<div class="text">Semantic UI</div>
<div class="menu">
<a href="http://www.learnsemantic.com" data-site="learn" class="item">Learn Semantic</a>
<a href="http://www.semantic-ui.com" data-site="ui" class="item">Semantic UI</a>
</div>
</div>
</div>
</div>
</div>
</div>
@ -64,7 +81,7 @@ type : 'Semantic'
<img src="/images/icons/theming.png" class="ui icon image">
Unbelievable Theming
</h1>
<p>Semantic provides true design freedom. Change the look and feel of your components with just a few variables.</p>
<p>Semantic provides real design freedom. Change the look and feel of your components with just a few variables.</p>
</div>
<div class="column">
<div data-type="element" data-element="button" class="ui large floating dropdown theme button">
@ -129,7 +146,7 @@ type : 'Semantic'
3000+ CSS Variables
</h2>
<p>The only dogma from this framework: <em>everything arbitrary is mutable</em>.</p>
<div class="ui disabled button">View Themes</div>
<div class="ui disabled large button">View Themes</div>
</div>
<div class="column">
<h2 class="ui icon header">
@ -137,7 +154,7 @@ type : 'Semantic'
50+ UI Definitions
</h2>
<p>Build your entire site with one UI stack. Share your UI between multiple projects.</p>
<div class="ui primary view-ui button">Browse UI</div>
<div class="ui primary view-ui large button">Browse UI</div>
</div>
<div class="column">
<h2 class="ui icon header">
@ -147,7 +164,7 @@ type : 'Semantic'
<p>
Semantic UI is a <b>free open source</b> project already used in multiple <a href="http://www.quirky.com" target="_blank">large</a> scale <a href="http://www.newrepublic.com" target="_blank">production</a> environments.
</p>
<a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui button">Visit GitHub</a>
<a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui large button">Visit GitHub</a>
</div>
</div>
</div>
@ -158,8 +175,8 @@ type : 'Semantic'
<img src="/images/icons/toolbox.png" class="ui icon image">
Unbelievable Breadth
</h1>
<p>Definitions aren't limited to just buttons on a page. Semantic's components fall into four categories, elements, collections, modules, and views which cover the gamut of interface design.</p>
<a class="ui primary button" href="/kitchen-sink.html">
<p>Definitions aren't limited to just buttons on a page. Semantic's components allow several distinct types of definitions: elements, collections, views, modules and behaviors which cover the gamut of interface design.</p>
<a class="ui large primary button" href="/kitchen-sink.html">
View Kitchen Sink
<i class="right chevron icon"></i>
</a>

40
server/documents/modules/dropdown.html.eco
View File

@ -75,6 +75,39 @@ themes : ['Default']
</select>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Search Dropdown</h4>
<p>A standard dropdown can be searchable</p>
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
<div class="item">English</div>
<div class="item">French</div>
<div class="item">German</div>
<div class="item">Greek</div>
<div class="item">Hungarian</div>
<div class="item">Italian</div>
<div class="item">Japanese</div>
<div class="item">Korean</div>
<div class="item">Lithuanian</div>
<div class="item">Persian</div>
<div class="item">Polish</div>
<div class="item">Portuguese</div>
<div class="item">Russian</div>
<div class="item">Spanish</div>
<div class="item">Swedish</div>
<div class="item">Turkish</div>
<div class="item">Vietnamese</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Search Selection</h4>
<p>A selection dropdown can allow a user to search through a large list of choices.</p>
@ -415,10 +448,11 @@ themes : ['Default']
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">In-Menu Searchable</h4>
<p>A dropdown can include a search prompt inside its menu</p>
<div class="ui searchable floating dropdown labeled icon button">
<div class="ui floating dropdown labeled icon button">
<i class="filter icon"></i>
<span class="text">Filter Posts</span>
<div class="menu">
@ -429,7 +463,7 @@ themes : ['Default']
<div class="divider"></div>
<div class="header">
<i class="tags icon"></i>
Filter by tag
Tag Label
</div>
<div class="item">
<div class="ui red empty circular label"></div>
@ -906,8 +940,8 @@ themes : ['Default']
<h4 class="ui header">Compact</h4>
<p>A compact dropdown has no minimum width</p>
<div class="ui compact selection dropdown">
<div class="text">Compact</div>
<i class="dropdown icon"></i>
<div class="text">Compact</div>
<div class="menu">
<div class="item">A</div>
<div class="item">B</div>

BIN
server/files/images/learn-logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

44
server/files/javascript/home.js
View File

@ -44,9 +44,53 @@ semantic.home.ready = function() {
setTimeout(function() {
$version.transition('fade', 600);
}, 7000);
},
changeLogo: function() {
var
$logo = $('.following .logo'),
$nextSide = $logo.find('.'+ $(this).data('site') +'.side'),
directions = [
'up',
'left',
'down',
'right',
'over',
'back'
],
direction = directions[Math.floor(Math.random() * directions.length)]
;
$logo
.shape('set next side', $nextSide)
.shape('flip ' + direction)
;
},
returnLogo: function() {
var
$logo = $('.following .logo'),
$nextSide = $logo.find('.ui.side')
;
$logo
.shape('set next side', $nextSide)
.shape('flip over')
;
}
};
$('.logo.shape')
.shape({
duration: 400
})
;
$('.following.bar .network.dropdown')
.dropdown({
onHide: handler.returnLogo
})
.find('.menu .item')
.on('mouseenter', handler.changeLogo)
;
$('.email.stripe form')
.form({
email: {

2
server/files/stylesheets/docs.css
View File

@ -1595,7 +1595,7 @@ body.progress.animated .ui.progress .bar {
}
#example.item .container,
#example.card .container {
width: 955px;
width: 965px;
}
}

13
server/files/stylesheets/home.css
View File

@ -558,9 +558,16 @@
left: 0%;
width: 100%;
}
#example.index .following.bar .menu {
margin-top: 2px;
}
#example.index .following .logo {
float: left;
width: 35px;
margin-right: 1em;
}
#example.index .following .logo .side {
width: 35px;
}
#example .masthead .version.label:after {
background-color: #000000 !important;
@ -777,6 +784,12 @@
margin-left: 2em;
margin-right: 2em;
}
#example.index .following.bar {
top: 37px;
}
#example.index .following.bar .logo {
margin-left: 75px;
}
}
@media only screen and (max-width: 1300px) {

2
server/partials/languages.html
View File

@ -19,5 +19,5 @@
<div class="item" data-percent="0" data-value="ja" data-english="Japanese">日本語</div>
<div class="item" data-percent="0" data-value="kr" data-english="Korean">한국어</div>
<div class="item" data-percent="0" data-value="it" data-english="Italian">Italiano</div>
<div class="item" data-precent="0" data-value="pl" data-englihs="Polish">polski</div>
<div class="item" data-precent="0" data-value="pl" data-english="Polish">polski</div>
</div>
Write Preview
Loading…
Cancel
Save