Skip to content

Commit

Permalink
Tabs removed in >medium width, moved UI elements to the navbar, resto…
Browse files Browse the repository at this point in the history 
…red notification post, layout fixes
  • Loading branch information
@avivace
avivace committed May 6, 2017
1 parent 15f18ed commit 28c47a3
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 120 deletions.
8 changes: 6 additions & 2 deletions chall.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,18 @@
<!-- Mobile -->
<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>
<!-- Full-width -->
<ul class="left hide-on-med-and-down">
<li id="pl" class="active"><a class="black-text" onClick="$('#sl').removeClass('active'); $('#pl').addClass('active'); $('ul.tabs').tabs('select_tab', 'problem');"><i class="material-icons left">assignment</i>Problem</a></li>
<li id="sl"><a class="black-text" onClick="$('#pl').removeClass('active'); $('#sl').addClass('active'); $('ul.tabs').tabs('select_tab', 'solution');"><i class="material-icons left">code</i>Solutions</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a class="black-text" href="index.html"><i class="material-icons left">view_agenda</i>Challenges</a></li>
<li><a class="black-text" href="settings.html"><i class="material-icons left">settings</i>Settings</a></li>
<li><a class="black-text" href="credits.html"><i class="material-icons left">info</i>About</a></li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<div class="hide-on-large-only nav-content">
<ul class="tabs tabs-transparent">


<li class="tab col s3"><a class="active" href="#problem">Problem</a></li>
Expand Down
9 changes: 9 additions & 0 deletions credits.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,15 @@ <h2>License </h2>

<h2> Changelog </h2>
<h4> Web App </h4>

<b>0.10 - 5/6/2017 </b> <br>
Web version <br>
Full responsive layout<br>
Faster difficulty filtering<br>
Added sharing options for the web version

<br><br>

<b>0.9 - 4/23/2017 </b> <br>
Android status bar will be affected by the theme.<br>
New loading animation.<br>
Expand Down
140 changes: 75 additions & 65 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,35 @@
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Daily Programmer</title>

<!-- CSS -->
<style>
body {
word-wrap: break-word !important;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Daily Programmer</title>
<!-- CSS -->
<style>
body {
word-wrap: break-word !important;
}
</style>

<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="" id="styleSheet" type="text/css" rel="stylesheet" media="screen,projection"/>


<!--<link href="" id="styleSheet" type="text/css" rel="stylesheet" media="screen,projection"/>-->
<!-- Fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>
<!-- NAVBAR -->
<nav id="nav" class="nav-extended grey lighten-1">
<div class="nav-wrapper">
<a style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo center">dailyProgrammer</a>
<!-- Mobile -->
<a href="#" onlick="sideNav()" data-activates="mobile-demo" class="black-text button-collapse"><i class="material-icons">menu</i></a>
<ul class="left hide-on-med-and-down">
<li> <a class='dropdown-button btn-flat' href='#' data-activates='dropdown1'><i class="material-icons left">filter_list</i><b>Difficulty</b></a>
</li>
</style>

<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="" id="styleSheet" type="text/css" rel="stylesheet" media="screen,projection"/>

<!--<link href="" id="styleSheet" type="text/css" rel="stylesheet" media="screen,projection"/>-->
<!-- Fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- NAVBAR -->
<nav id="nav" class="nav-extended grey lighten-1">
<div class="nav-wrapper">
<a style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo center">dailyProgrammer</a>
<!-- Mobile -->
<a href="#" onlick="sideNav()" data-activates="mobile-demo" class="black-text button-collapse"><i class="material-icons">menu</i></a>
<ul class="left hide-on-med-and-down">
<li> <a class='dropdown-button btn-flat' href='#' data-activates='dropdown1'><i class="material-icons left">filter_list</i><b>Difficulty</b></a>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li class="active"><a class="black-text" href="index.html"><i class="material-icons left">view_agenda</i>Challenges</a></li>
Expand All @@ -54,39 +50,53 @@
<div class="nav-content">
<ul class="black-text tabs tabs-transparent hide-on-large-only">
<li class="tab col s3"><a onClick="showAll()" class="active" href="#">All</a>
</li>
<li class="tab col s3"><a onClick="showEasy()" href="#">Easy</a></li>
<li class="tab col s3"><a onClick="showMed()" href="#">Medium</a></li>
<li class="tab col s3"><a onClick="showHard()" href="#">Hard</a></li>
</ul>
</div>
</nav>

<!-- Difficulty filter dropdown structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a onClick="showAll()" href="#">all</a></li>
<li><a onClick="showEasy()" href="#">easy</a></li>
<li><a onClick="showMed()" href="#">medium</a></li>
<li><a onClick="showHard()" href="#">hard</a></li>
</ul>

<div id="all"></div>
<div id="loading"><br><center> <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="3" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg></center></div>
<div id="bottom"></div>
</li>
<li class="tab col s3"><a onClick="showEasy()" href="#">Easy</a></li>
<li class="tab col s3"><a onClick="showMed()" href="#">Medium</a></li>
<li class="tab col s3"><a onClick="showHard()" href="#">Hard</a></li>
</ul>
</div>
</nav>

<!-- Scripts -->
<script src="js/styler.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/hammer-time.min.js"></script>
<script src="js/front.js"></script>
<script src="js/analytics.js"></script>
<script src="https://use.fontawesome.com/0eaed8d23a.js"></script>
<!-- Difficulty filter dropdown structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a onClick="showAll()" href="#">all</a></li>
<li><a onClick="showEasy()" href="#">easy</a></li>
<li><a onClick="showMed()" href="#">medium</a></li>
<li><a onClick="showHard()" href="#">hard</a></li>
</ul>
<div class="row">
<div class="hide-on-med-and-down col m1 l1 xl2"></div>
<div class="col s12 m12 l10 xl8">
<div id="notification" class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Join our community!</span>
<p style="font-size: 16px">Thank you everybody! We are more than <b>4000</b> weekly users, let's build a community and discuss the challenges, compare solutions, provide feedback on this application and talk about nerd stuff.</p>
</div>
<div class="card-action">
<a target="_blank" href="https://t.me/dailyprogrammer">Telegram&nbsp;Chat</a>
<a target="_blank" href="https://discord.gg/feXdA9V">Discord&nbsp;Server</a>
<a onclick="hideN()" href="#">Hide&nbsp;message</a>
</div>
</div>
</div>
<div class="hide-on-med-and-down col m1 l1 xl2"></div>
</div>
<div id="all"></div>
<div id="loading"><br><center> <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="3" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg></center></div>
<div id="bottom"></div>
<!-- Scripts -->
<script src="js/styler.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/hammer-time.min.js"></script>
<script src="js/front.js"></script>
<script src="js/analytics.js"></script>
<script src="https://use.fontawesome.com/0eaed8d23a.js"></script>


</body>
</body>
</html>
4 changes: 4 additions & 0 deletions js/credits.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
$(document).ready(function(){
$('.modal').modal();
});

function shareApp(){
if (webview){
var text = "Check out Daily Programmer! A free app for coders, developers or students: daily coding challenges for learning, refreshing or just for fun! https://play.google.com/store/apps/details?id=avivace.daily_programmer";
Expand Down
35 changes: 16 additions & 19 deletions js/front.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@
twitter.com/avivace4 - www.avivace.ovh
Renders the challenge list, with title and a description peek for every
challenge.
0.10
challenge. Handles difficulty filtering.
*/

var after_string;
var loading = 0;
var cp = 0;
var row_id = 0;
var actual_version = 10;

var diff_obj = {
easy: true,
Expand Down Expand Up @@ -70,13 +69,13 @@ function removeMd(md, options) {
};

// Pre render HTML (.selftext_html)
function htmlDecode(input){
function htmlDecode(input) {
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes.lenght === 0 ? "" : e.childNodes[0].nodeValue;
}

function isElementInViewport (el) {
function isElementInViewport(el) {
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
Expand Down Expand Up @@ -253,17 +252,6 @@ function renderChallenges(after){
)
}


// NOTE: give a ~5% tolerance to avoid having to bump to the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() && !loading) {
console.log("reached bottom with after_string ="+after_string);
renderChallenges(after_string);
$("#loading").show();
loading = 1;
}
});

function hideN(){
localStorage.setItem("hideN", true);
Materialize.toast('You can still find those links in the About page', 5000)
Expand All @@ -285,7 +273,16 @@ function notifyUpdate(){
localStorage.setItem("version", actual_version);
}

actual_version = 10;
// NOTE: give a ~5% tolerance to avoid having to bump to the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() && !loading) {
console.log("reached bottom with after_string ="+after_string);
renderChallenges(after_string);
$("#loading").show();
loading = 1;
}
});

hidePost();
notifyUpdate();
renderChallenges('');
hidePost();
renderChallenges('');
35 changes: 1 addition & 34 deletions js/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,5 @@
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: false // Choose whether you can drag to open on touch screens
});
$('.modal').modal();

}); // end of document ready
})(jQuery); // end of jQuery name space

//$overlay = $('<div id="sidenav-overlay"></div>');
//$('body').append($overlay);
//$overlay.css('opacity', 0)

/*
// create a simple instance
// by default, it only adds horizontal recognizers
var all_div = document.getElementById('all');
var nav = document.getElementById('nav');
var mc = new Hammer(all_div);
var mc2 = new Hammer(nav);
var sidebar = 0;
// listen to events...
mc.on("panleft panright tap press swipe", function(ev) {
if (sidebar == 0 && ev.type == 'panright'){
sidebar = 1;
$('.button-collapse').sideNav('show');
}
});
mc2.on("panleft panright tap press swipe", function(ev) {
if (sidebar == 1 && ev.type == 'panleft') {
$('.button-collapse').sideNav('show');
sidebar = 0;
}
});
*/
})(jQuery); // end of jQuery name space

0 comments on commit 28c47a3

Please sign in to comment.