Skip to content

Commit 5d53371

Browse files
jlukicjlukic
committed
Iteration on layout variations
1 parent c2a646f commit 5d53371

5 files changed

Lines changed: 183 additions & 49 deletions

File tree

‎css/global.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,15 @@ a:hover b {
9797
.repo.menu:first-child {
9898
margin-top: 0.35em;
9999
}
100-
.repo.menu ~ p {
100+
.column .checkout p {
101101
font-size: 11px;
102102
margin: 5px 0px;
103103
color: #767676;
104104
}
105-
.repo.menu ~ p + .button {
105+
.column .checkout > .button {
106106
margin-top: 10px;
107107
}
108-
.repo.menu ~ .button {
108+
.column .checkout > .button:last-child {
109109
margin: 7px 0px;
110110
}
111111

‎css/layouts/home.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,12 @@
3232
Language Used
3333
-----------------*/
3434

35-
#home .ui.top.attached.menu {
36-
border-bottom: none;
37-
}
3835
#home .ui.language.segments {
3936
border-radius: 0px 0px 4px 4px;
4037
box-shadow: none;
38+
border: none;
4139
width: calc(100% + 2px);
42-
margin: 0px 0px 10px -1px;
40+
margin: 0px 0px 10px 0px;
4341
overflow: hidden;
4442
}
4543
#home .language.segments .segment {
@@ -55,10 +53,12 @@
5553
}
5654

5755
#home .latest.segment {
58-
border-top: 1px solid #DDD;
5956
padding: 0.35em 0.5em;
6057
color: #999999;
6158
}
59+
#home .latest.attached.segment {
60+
border-top: 1px solid #DDD;
61+
}
6262

6363
/* Clippy */
6464
#home .clippy.icon {

‎css/ui/components/material/button.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -747,19 +747,19 @@
747747
.ui.basic.button:hover {
748748
background: #ffffff !important;
749749
color: rgba(0, 0, 0, 0.8) !important;
750-
box-shadow: 0px 0px 0px 1px #dddddd, 0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important;
750+
box-shadow: 0px 0px 0px 1px #dddddd inset, 0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important;
751751
}
752752
.ui.basic.buttons .button:focus,
753753
.ui.basic.button:focus {
754754
background: #ffffff !important;
755755
color: rgba(0, 0, 0, 0.8) !important;
756-
box-shadow: 0px 0px 0px 1px #dddddd, 0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important;
756+
box-shadow: 0px 0px 0px 1px #dddddd inset, 0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important;
757757
}
758758
.ui.basic.buttons .button:active,
759759
.ui.basic.button:active {
760760
background: #ffffff !important;
761761
color: rgba(0, 0, 0, 0.9) !important;
762-
box-shadow: 0px 0px 0px 1px #dddddd;
762+
box-shadow: 0px 0px 0px 1px #dddddd inset;
763763
}
764764
.ui.basic.buttons .active.button,
765765
.ui.basic.active.button {

‎index.html‎

Lines changed: 101 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,19 @@
1010
<!-- Site Properities -->
1111
<title>Semantic-Org/Semantic-UI</title>
1212

13-
<!-- CSS Includes -->
13+
<!-- Always Use Same -->
1414
<link rel="stylesheet" type="text/css" href="css/ui/components/icon.css">
15-
<link rel="stylesheet" type="text/css" href="css/ui/components/form.css">
16-
<link rel="stylesheet" type="text/css" href="css/ui/components/sidebar.css">
15+
<link rel="stylesheet" type="text/css" href="css/ui/components/image.css">
1716
<link rel="stylesheet" type="text/css" href="css/ui/components/transition.css">
17+
<link rel="stylesheet" type="text/css" href="css/ui/components/default/sidebar.css">
18+
<link rel="stylesheet" type="text/css" href="css/ui/components/default/checkbox.css">
1819

20+
<!--
21+
These css files are pre-compiled
22+
to test out gulp
23+
use static.html, run gulp from semantic/, and modify theme.config or variables
24+
!-->
25+
<link rel="stylesheet" rel="stylesheet" type="text/css" href="css/ui/components/github/form.css">
1926
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/reset.css">
2027
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/site.css">
2128
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/breadcrumb.css">
@@ -25,7 +32,6 @@
2532
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/dropdown.css">
2633
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/grid.css">
2734
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/header.css">
28-
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/image.css">
2935
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/input.css">
3036
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/label.css">
3137
<link class="themable" rel="stylesheet" type="text/css" href="css/ui/components/github/list.css">
@@ -44,19 +50,44 @@
4450

4551
<body id="home">
4652
<div class="ui theme sidebar">
47-
<h2 class="ui dividing header">Theme</h2>
4853
<div class="ui form">
54+
<h3 class="ui dividing header">Layout </h3>
4955
<div class="field">
50-
<div class="ui first checkbox"
56+
<div class="ui first checkbox">
5157
<input type="checkbox"></input>
52-
<label>Reverse Columns
58+
<label>
59+
Reverse Columns
60+
<i class="tiny link question icon" data-content="Toggles column order in html"></i>
61+
</label>
62+
</div>
63+
</div>
64+
<div class="field">
65+
<div class="ui second checkbox">
66+
<input type="checkbox"></input>
67+
<label>Distinctive Buttons
68+
<i class="tiny link question icon" data-content="Adds 'primary', 'labeled icon' and colored classes on a few buttons"></i>
69+
</label>
5370
</div>
54-
<select class="ui layout dropdown" name="global">
55-
<option value="default">Standard</option>
56-
<option value="left-menu">Left Menu</option>
57-
<option value="customized" selected>Customized</option>
58-
</select>
5971
</div>
72+
<div class="field">
73+
<div class="ui third checkbox">
74+
<input type="checkbox"></input>
75+
<label>
76+
Add Minimalism
77+
<i class="tiny link question icon" data-content="Adds basic class name to buttons and table"></i>
78+
</label>
79+
</div>
80+
</div>
81+
<div class="field">
82+
<div class="ui fourth checkbox">
83+
<input type="checkbox"></input>
84+
<label>
85+
Block Style Menu
86+
<i class="tiny link question icon" data-content="Removes tabular menu class"></i>
87+
</label>
88+
</div>
89+
</div>
90+
<h3 class="ui dividing header">Theme</h3>
6091
<div class="field">
6192
<label>Global Theme</label>
6293
<select class="ui theme dropdown" name="global">
@@ -194,7 +225,7 @@ <h4>Ignoring</h4>
194225
</div>
195226
<div class="ui labeled button">
196227
<div class="ui button">
197-
<i class="star icon"></i> Unstar
228+
<i class="star icon"></i> Star
198229
</div>
199230
<a class="ui basic label">19,120</a>
200231
</div>
@@ -214,6 +245,44 @@ <h4>Ignoring</h4>
214245
</div>
215246
</div>
216247

248+
<!-- This is only showed with ribbon menu variation -->
249+
<div class="ui fluid seven item repo menu">
250+
<div class="ui container">
251+
<a class="active item">
252+
<i class="grey code icon"></i>
253+
Code
254+
</a>
255+
<a class="item">
256+
<i class="grey issue opened icon"></i>
257+
258+
Issues
259+
</a>
260+
<a class="item">
261+
<i class="grey git pull request icon"></i>
262+
263+
Pull Requests
264+
</a>
265+
<a class="item">
266+
<i class="grey book icon"></i>
267+
Wiki
268+
</a>
269+
<div style="display:none" class="ui divider"></div>
270+
<a class="item">
271+
<i class="grey pulse icon"></i>
272+
Pulse
273+
</a>
274+
<a class="item">
275+
<i class="grey graph icon"></i>
276+
Graphs
277+
</a>
278+
<div style="display:none" class="ui divider"></div>
279+
<a class="item">
280+
<i class="grey tools icon"></i>
281+
Settings
282+
</a>
283+
</div>
284+
</div>
285+
217286
<!-- Repo Content -->
218287
<div class="ui equal width vertically padded grid container">
219288
<div class="twelve wide column">
@@ -266,7 +335,7 @@ <h4>Ignoring</h4>
266335
</div>
267336
</div>
268337

269-
<div class="ui top attached info recent message">
338+
<div class="ui top attached recent info message">
270339
Merge pull request <a href="#">#2728</a> from sunseth/patch-1
271340
</div>
272341
<div class="ui attached latest segment">
@@ -536,24 +605,26 @@ <h1>Semantic UI</h1>
536605
Settings
537606
</a>
538607
</div>
539-
<p><b>Subversion</b> checkout URL</b>
540-
<div class="ui fluid action input">
541-
<input type="text" value="https://github.com/Semantic-Org/Semantic-UI">
542-
<a class="ui icon button">
543-
<i class="clippy icon"></i>
608+
<div class="checkout">
609+
<p><b>Subversion</b> checkout URL</b>
610+
<div class="ui fluid action input">
611+
<input type="text" value="https://github.com/Semantic-Org/Semantic-UI">
612+
<a class="ui icon button">
613+
<i class="clippy icon"></i>
614+
</a>
615+
</div>
616+
<p>You can clone with <a href="#">HTTPS</a>, <a href="#">SSH</a>, or <a href="#">Subversion</a>.
617+
<i class="tiny link question icon" data-content="Get help on which URL is right for you."></i>
618+
</p>
619+
<a class="ui fluid button">
620+
<i class="desktop device icon"></i>
621+
Clone in Desktop
622+
</a>
623+
<a class="ui fluid button">
624+
<i class="cloud download icon"></i>
625+
Download Zip
544626
</a>
545627
</div>
546-
<p>You can clone with <a href="#">HTTPS</a>, <a href="#">SSH</a>, or <a href="#">Subversion</a>.
547-
<i class="tiny link question icon" data-content="Get help on which URL is right for you."></i>
548-
</p>
549-
<a class="ui fluid button">
550-
<i class="desktop device icon"></i>
551-
Clone in Desktop
552-
</a>
553-
<a class="ui fluid button">
554-
<i class="cloud download icon"></i>
555-
Download Zip
556-
</a>
557628
</div>
558629
</div>
559630
</div>

‎javascript/theme.js‎

Lines changed: 71 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,13 @@ $(document)
1616
$sidebar = $('.ui.sidebar'),
1717
$launcher = $('.launch'),
1818
$css = $('link.themable'),
19-
$menuToggle = $sidebar.find('.checkbox[name="menu"]'),
20-
$buttonToggle = $sidebar.find('.checkbox[name="button"]'),
19+
$menuToggle = $sidebar.find('.first.checkbox'),
20+
$buttonToggle = $sidebar.find('.second.checkbox'),
21+
$minimalToggle = $sidebar.find('.third.checkbox'),
22+
$blockToggle = $sidebar.find('.fourth.checkbox'),
2123
$themeDropdown = $sidebar.find('.theme.dropdown'),
2224

25+
previousClass,
2326
regExp = /(\/components\/).*(\/[a-z]*.css)/
2427
;
2528

@@ -33,30 +36,90 @@ $(document)
3336
;
3437

3538
$menuToggle
39+
.checkbox('uncheck')
3640
.checkbox({
37-
onEnable: function() {
41+
onChecked: function() {
3842
$('.wide.column').parent().append($('.wide.column'));
3943
$('.vertical.tabular.menu').removeClass('right');
4044
},
41-
onDisable: function() {
45+
onUnchecked: function() {
4246
$('.wide.column').parent().prepend($('.wide.column'));
4347
$('.vertical.tabular.menu').addClass('right');
4448
}
4549
})
4650
;
4751
$buttonToggle
52+
.checkbox('uncheck')
4853
.checkbox({
4954
onChange: function(layout) {
5055
$('.forked.repo.icon')
5156
.closest('.button')
52-
.toggleClass('primary')
57+
.toggleClass('secondary')
58+
;
59+
$('.star.icon')
60+
.closest('.button')
61+
.toggleClass('labeled icon')
62+
;
63+
$('.cloud.download').closest('.button').toggleClass('green');
64+
}
65+
})
66+
;
67+
$minimalToggle
68+
.checkbox('uncheck')
69+
.checkbox({
70+
onChecked: function() {
71+
$('.column .vertical.menu')
72+
.removeClass('tabular')
73+
.addClass('secondary')
74+
;
75+
$('.ui.table')
76+
.prev()
77+
.attr('class', 'ui bottom attached latest segment')
78+
;
79+
},
80+
onUnchecked: function() {
81+
$('.column .vertical.menu')
82+
.addClass('tabular')
83+
.removeClass('secondary')
84+
;
85+
$('.ui.table')
5386
.prev()
54-
.toggleClass('labeled icon')
87+
.attr('class', 'ui attached latest segment')
88+
;
89+
},
90+
onChange: function(layout) {
91+
$('.ui.table')
92+
.toggleClass('very basic')
93+
;
94+
$('.git.compare')
95+
.closest('.button')
96+
.toggleClass('green positive')
5597
;
98+
$('.column .ui.button').toggleClass('basic');
5699
}
57100
})
58-
.dropdown('set selected', 'default')
59101
;
102+
$blockToggle
103+
.checkbox('uncheck')
104+
.checkbox({
105+
onChecked: function() {
106+
previousClass = $('.column .vertical.menu').attr('class');
107+
$('.column .vertical.menu')
108+
.attr('class', 'ui fluid vertical repo menu')
109+
.find('.divider').attr('style', 'display:none')
110+
;
111+
},
112+
onUnchecked: function() {
113+
if(previousClass) {
114+
$('.column .vertical.menu')
115+
.attr('class', previousClass)
116+
.find('.divider').removeAttr('style')
117+
;
118+
}
119+
}
120+
})
121+
;
122+
60123

61124

62125

@@ -77,7 +140,7 @@ $(document)
77140
});
78141
// make other dropdown match
79142
if(type == 'global') {
80-
$dropdown.dropdown('set value', theme);
143+
$themeDropdown.dropdown('set value', theme);
81144
}
82145
}
83146
})

0 commit comments

Comments
 (0)