Skip to content

Commit 5ab9cc1

Browse files
avivaceavivace
committed
Unified navbar, getting things ready for full-width mode
1 parent 54ed18e commit 5ab9cc1

File tree

6 files changed

+110
-61
lines changed

6 files changed

+110
-61
lines changed

‎chall.html

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,33 @@
2626
</head>
2727

2828
<body>
29-
<div class="navbar-fixed">
30-
<nav class="grey lighten-1">
31-
<div class="nav-wrapper">
32-
<a href="#!" id="title" class="brand-logo black-text" style="font-weight: 300; font-size: 1.5rem;"></a>
33-
<a href="index.html" class="black-text"><i style="font-size: 24px" class="material-icons">&nbsp;chevron_left</i></a>
34-
</div>
35-
</nav>
29+
<!-- NAVBAR -->
30+
<nav class="nav-extended grey lighten-1">
31+
<div class="nav-wrapper">
32+
<a style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo center">dailyProgrammer</a>
33+
<!-- Mobile -->
34+
<a href="index.html" class="black-text left hide-on-large-only"><i style="font-size: 24px" class="material-icons">&nbsp;chevron_left</i></a>
35+
<!-- Full-width -->
36+
<ul class="right hide-on-med-and-down">
37+
<li><a class="black-text" href="index.html"><i class="material-icons left">view_agenda</i>Challenges</a></li>
38+
<li><a class="black-text" href="settings.html"><i class="material-icons left">settings</i>Settings</a></li>
39+
<li><a class="black-text" href="credits.html"><i class="material-icons left">info</i>About</a></li>
40+
</ul>
3641
</div>
42+
<div class="nav-content">
43+
<ul class="tabs tabs-transparent">
44+
45+
46+
<li class="tab col s3"><a class="active" href="#problem">Problem</a></li>
47+
<li class="tab col s3"><a id="slink" href="#solution">Solutions</a></li>
48+
</ul>
49+
</div>
50+
</nav>
3751

3852

3953
<div class="row">
4054
<div class="col s12">
41-
<ul class="tabs">
42-
<li class="tab col s3"><a class="active" href="#problem">Problem</a></li>
43-
<li class="tab col s3"><a id="slink" href="#solution">Solutions</a></li>
44-
</ul>
55+
4556
</div>
4657

4758

‎credits.html

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,20 @@
1818
</head>
1919

2020
<body>
21-
<div class="navbar-fixed">
22-
<nav class="grey lighten-1">
23-
<div class="nav-wrapper">
24-
<a href="#!" style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo">About</a>
25-
<a href="index.html" class="black-text"><i style="font-size: 32px" class="material-icons">&nbsp;&nbsp;chevron_left</i></a>
26-
</div>
27-
</nav>
21+
<!-- NAVBAR -->
22+
<nav class="grey lighten-1">
23+
<div class="nav-wrapper">
24+
<a style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo center">dailyProgrammer</a>
25+
<!-- Mobile -->
26+
<a href="index.html" class="black-text left hide-on-large-only"><i style="font-size: 24px" class="material-icons">&nbsp;chevron_left</i></a>
27+
<!-- Full-width -->
28+
<ul class="right hide-on-med-and-down">
29+
<li><a class="black-text" href="index.html"><i class="material-icons left">view_agenda</i>Challenges</a></li>
30+
<li><a class="black-text" href="settings.html"><i class="material-icons left">settings</i>Settings</a></li>
31+
<li class="active"><a class="black-text" href="credits.html"><i class="material-icons left">info</i>About</a></li>
32+
</ul>
2833
</div>
34+
</nav>
2935

3036

3137
<div class="row">
@@ -34,7 +40,7 @@
3440
<img src="assets/2.jpg" width="128px" height="128px">
3541
<br>
3642
Thank you for trying this application! Keep in mind that this is an early release and I've still a lot of features to implement. <br>
37-
Send your feedback and suggestions at <a href="https://twitter.com/avivace4"> @avivace4 </a> or <code> admin (at) avivace.ovh </code><br>
43+
Send your feedback and suggestions at <a href="https://twitter.com/avivace4" target="_blank"> @avivace4 </a> or <code> admin (at) avivace.ovh </code><br>
3844
This app is totally free and has no ad. Please consider supporting it by leaving a review on the <a href="https://play.google.com/store/apps/details?id=avivace.daily_programmer" target="_blank">Play Store</a>.
3945
<br>
4046
<h3>Credits </h3>

‎css/style.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,23 @@ h6 {
7171

7272
.tabs {
7373
font-weight: bold;
74+
color: red;
75+
}
76+
77+
/* !important shouldn't be here */
78+
.tabs.tabs-transparent .tab a,
79+
.tabs.tabs-transparent .tab.disabled a,
80+
.tabs.tabs-transparent .tab.disabled a:hover {
81+
color: rgba(50, 50, 50, 0.7) !important;
82+
}
83+
84+
.tabs.tabs-transparent .tab a:hover,
85+
.tabs.tabs-transparent .tab a.active {
86+
color: rgba(0, 0, 0, 1) !important;
87+
}
88+
89+
.tabs.tabs-transparent .indicator {
90+
background-color: rgba(150, 150, 150, 1) !important;
7491
}
7592

7693
.sidebar-icons {

‎index.html

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!--
2-
dailyProgrammer - (c) Antonio Vivace, 2016
2+
dailyProgrammer - (c) Antonio Vivace, 2016-2017
33
admin@avivace.ovh
44
-->
55
<!DOCTYPE html>
@@ -15,55 +15,59 @@
1515
word-wrap: break-word !important;
1616
}
1717
</style>
18-
<!-- Fonts -->
19-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2018
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
21-
<link id="styleSheet" href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
19+
<link id="styleSheet" href="" type="text/css" rel="stylesheet" media="screen,projection"/>
20+
21+
<!-- Fonts -->
22+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2223

2324
</head>
2425

2526
<body>
26-
<nav class="grey lighten-1">
27+
<!-- NAVBAR -->
28+
<nav class="nav-extended grey lighten-1">
2729
<div class="nav-wrapper">
28-
<a href="#!" style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo">dailyProgrammer</a>
30+
<a style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo center">dailyProgrammer</a>
31+
<!-- Mobile -->
2932
<a href="#" data-activates="mobile-demo" class="black-text button-collapse"><i class="material-icons">menu</i></a>
3033
<ul class="right hide-on-med-and-down">
31-
<li><a href="sass.html">Sass</a></li>
32-
<li><a href="badges.html">Components</a></li>
33-
<li><a href="collapsible.html">Javascript</a></li>
34-
<li><a href="mobile.html">Mobile</a></li>
34+
<li class="active"><a class="black-text" href="index.html"><i class="material-icons left">view_agenda</i>Challenges</a></li>
35+
<li><a class="black-text" href="settings.html"><i class="material-icons left">settings</i>Settings</a></li>
36+
<li><a class="black-text" href="credits.html"><i class="material-icons left">info</i>About</a></li>
3537
</ul>
38+
<!-- Full-width -->
3639
<ul class="side-nav" id="mobile-demo">
3740
<br>
3841
<li><a class="black-text" href="index.html"><i class="black-text sidebar-icons material-icons">view_agenda</i>Challenges</a></li>
3942
<li><a class="black-text" href="settings.html"><i class="black-text sidebar-icons material-icons">settings</i>Settings</a></li>
4043
<li><a class="black-text" href="credits.html"><i class="black-text sidebar-icons material-icons">info</i>About</a></li>
4144
</ul>
4245
</div>
46+
<div class="nav-content">
47+
<ul class="black-text tabs tabs-transparent hide-on-med-and-up">
48+
<li class="tab col s3"><a class="active" href="#all">All</a>
49+
</li>
50+
<li class="tab col s3"><a href="#easy">Easy</a></li>
51+
<li class="tab col s3"><a href="#med">Medium</a></li>
52+
<li class="tab col s3"><a href="#hard">Hard</a></li>
53+
</ul>
54+
</div>
4355
</nav>
4456

4557

4658
<!-- Tabs TODO: colored tab titles? (on select)-->
4759
<div class="row">
48-
<div class="col s12">
49-
<ul class="tabs">
50-
<li class="tab col s3"><a class="active" href="#all">All</a></li>
51-
<li class="tab col s3"><a href="#easy">Easy</a></li>
52-
<li class="tab col s3"><a href="#med">Medium</a></li>
53-
<li class="tab col s3"><a href="#hard">Hard</a></li>
54-
</ul>
55-
</div>
60+
<div id="all" class="col s12"></div>
61+
<div id="easy" class="row"></div>
62+
<div id="med" class="row"></div>
63+
<div id="hard" class="row"></div>
5664

57-
<div id="all" class="col s12"></div>
58-
<div id="easy" class="col s12"></div>
59-
<div id="med" class="col s12"></div>
60-
<div id="hard" class="col s12"></div>
61-
62-
<div id="test"></div>
63-
<div id="loading" style="text-align: center">
64-
<br><br><br>
65-
<i class="loading fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
66-
<span class="sr-only">Loading...</span>
65+
<div id="test"></div>
66+
<div id="loading" style="text-align: center">
67+
<br><br><br>
68+
<i class="loading fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
69+
<span class="sr-only">Loading...</span>
70+
</div>
6771
</div>
6872

6973
<!-- Scripts -->

‎js/front.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function renderChallenges(after){
101101
// Weekly
102102
if (card_style == 'blue') header = post.data.title.substring(0, post.data.title.lenght);
103103

104-
// border-bottom: 1px solid rgba(0, 0, 0, 0.12);
104+
// border-bottom: 1px solidf rgba(0, 0, 0, 0.12);
105105

106106
// Let's build the card
107107
if (card_style == 'white'){
@@ -137,11 +137,12 @@ function renderChallenges(after){
137137
text_color = 'white-text'
138138
title_color = 'white'
139139
}
140-
var p1 = '<div id='+'"CH'+i+'"'+'class="card ';
140+
var p1 = '<div id='+'"CH'+i+'"'+'class="col s12 m6 card ';
141141

142-
var card_o = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'">'+header+'</span><p class="'+text_color+'">'+body+'</p></div><div class="card-action"><a href="'+link+'" style="font-weight: 500;" class="'+text_color+'">GO TO CHALLENGE &nbsp;<i style="vertical-align: -15%; font-size: 16px;" class="material-icons">launch</i></a> <a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 0px"><b> '+diff+'</b> </a></div></div>';
142+
//var card_o = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'">'+header+'</span><p class="'+text_color+'">'+body+'</p></div><div class="card-action"><a href="'+link+'" style="font-weight: 500;" class="'+text_color+'">GO TO CHALLENGE &nbsp;<i style="vertical-align: -15%; font-size: 16px;" class="material-icons">launch</i></a> <a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 0px"><b> '+diff+'</b> </a></div></div>';
143143

144144
var card = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="truncate card-title '+text_color+'"><a style="color: '+ title_color +'; text-shadow: 1px 1px 2px #BBB;">'+ header+'</a><a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 3%"><b> '+diff+'</b> </a></span><p class="'+text_color+'">'+body+'</p></div></div></div>';
145+
var card_nodiff = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="truncate card-title '+text_color+'"><a style="color: '+ title_color +'; text-shadow: 1px 1px 2px #BBB;">'+ header+'</a><a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 3%"><b></b> </a></span><p class="'+text_color+'">'+body+'</p></div></div></div>';
145146

146147
var idd = after_string +'_'+ i;
147148
$("#all").append('<div id="'+idd.substring(7, idd.lenght)+'">'+card+'</div>');
@@ -150,10 +151,6 @@ function renderChallenges(after){
150151
//e.preventDefault();
151152
window.location = link;
152153
});
153-
154-
155-
var card_nodiff = p1+card_color+'"> <div class="card-content" style="border-bottom: 1px solid rgba(0, 0, 0, 0.12)"><span class="card-title '+text_color+'">'+header+'<a style="font-size: 14px ;color:'+ diff_col +'; position: absolute; right: 3%"><b> </b> </a></span><p class="'+text_color+'">'+body+'</p></div></div></div>';
156-
157154

158155
if (post.data.title.indexOf('Easy') !== -1) {
159156
$("#easy").append('<div id="a'+i+'">'+card_nodiff+'</div>');

‎settings.html

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,20 @@
1919
</head>
2020

2121
<body>
22-
<div class="navbar-fixed">
23-
<nav class="grey lighten-1">
24-
<div class="nav-wrapper">
25-
<a href="#!" style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo">Settings</a>
26-
<a href="index.html" class="black-text"><i style="font-size: 32px" class="material-icons">&nbsp;&nbsp;chevron_left</i></a>
27-
</div>
28-
</nav>
22+
<!-- NAVBAR -->
23+
<nav class="grey lighten-1">
24+
<div class="nav-wrapper">
25+
<a style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo center">dailyProgrammer</a>
26+
<!-- Mobile -->
27+
<a href="index.html" class="left hide-on-large-only black-text"><i style="font-size: 24px" class="material-icons">&nbsp;chevron_left</i></a>
28+
<!-- Full-width -->
29+
<ul class="right hide-on-med-and-down">
30+
<li><a class="black-text" href="index.html"><i class="material-icons left">view_agenda</i>Challenges</a></li>
31+
<li class="active"><a class="black-text" href="settings.html"><i class="material-icons left">settings</i>Settings</a></li>
32+
<li><a class="black-text" href="credits.html"><i class="material-icons left">info</i>About</a></li>
33+
</ul>
2934
</div>
35+
</nav>
3036

3137

3238
<div class="row">
@@ -54,6 +60,14 @@
5460
</label>
5561
</div>
5662
-->
63+
<div class="switch">
64+
<a style="font-size:24px"> Enable Code Highlightning </a>
65+
<label>
66+
67+
<input checked="false" type="checkbox">
68+
<span class="lever"></span>
69+
</label>
70+
</div>
5771
<br>
5872
<a id="sub" onclick="apply()" class="waves-effect waves-light btn">Apply</a>
5973

0 commit comments

Comments
 (0)