diff --git a/.gitignore b/.gitignore index de90324..1dd5375 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,5 @@ node_modules .sass-cache -*.sublime-project -*.sublime-workspace + +scripts/modules.js diff --git a/gulpfile.js b/gulpfile.js index 30e64f8..1b61167 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,7 +6,8 @@ var gulp = require('gulp'), rename = require('gulp-rename'), concat = require('gulp-concat-util'), prefix = require('gulp-autoprefixer'), - groupMQ = require('gulp-group-css-media-queries'); + groupMQ = require('gulp-group-css-media-queries'), + jade = require('gulp-jade'); var paths = { styles: 'styles/**/*.scss', @@ -19,11 +20,20 @@ var paths = { 'scripts/functions.js', 'scripts/actions.js', 'scripts/listeners.js', - 'scripts/init.js' + 'scripts/init.js', + 'scripts/modules.js' ], + scriptModules: { + root: 'scripts/modules/**/*.js', + dest: 'scripts' + }, + templates: { + root: 'templates/index.jade' + }, watch: { - scripts: 'scripts/**/*.js', - styles: 'styles/**/*.scss' + scripts: ['scripts/**/*.js', '!scripts/modules.js'], + styles: 'styles/**/*.scss', + templates: 'templates/**/*.jade' }, root: './', distribution: 'dist/' @@ -45,7 +55,15 @@ gulp.task('styles', function() { .pipe(gulp.dest(paths.distribution)); }); -gulp.task('scripts', function() { +gulp.task('scripts-modules', function() { + return gulp.src(paths.scriptModules.root) + .pipe(jshint()) + .pipe(jshint.reporter('default')) + .pipe(concat('modules.js')) + .pipe(gulp.dest(paths.scriptModules.dest)); +}); + +gulp.task('scripts', ['scripts-modules'], function() { return gulp.src(paths.scripts) .pipe(jshint()) .pipe(jshint.reporter('default')) @@ -61,9 +79,18 @@ gulp.task('scripts', function() { .pipe(gulp.dest(paths.distribution)); }); -gulp.task('default', ['styles', 'scripts']); +gulp.task('templates', function() { + return gulp.src(paths.templates.root) + .pipe(jade({ + pretty: true + })) + .pipe(gulp.dest(paths.root)); +}); + +gulp.task('default', ['styles', 'scripts', 'templates']); gulp.task('dev', function() { gulp.watch(paths.watch.styles, ['styles']); gulp.watch(paths.watch.scripts, ['scripts']); + gulp.watch(paths.watch.templates, ['templates']); }); diff --git a/img/cancel.png b/img/cancel.png deleted file mode 100644 index df8832f..0000000 Binary files a/img/cancel.png and /dev/null differ diff --git a/img/close.png b/img/close.png deleted file mode 100644 index 151ebe7..0000000 Binary files a/img/close.png and /dev/null differ diff --git a/index.html b/index.html index eac0c18..385f796 100644 --- a/index.html +++ b/index.html @@ -52,23 +52,17 @@ + +
Channels +
-
Sorting
-
-

hot

-

new

-

controversial

-

top

-
Options
About
Export Data
Import Data
-
Mnml
+
Theme
@@ -76,15 +70,23 @@
+
diff --git a/package.json b/package.json index 8dd99c0..2caca56 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "gulp-jshint": "~1.6.3", "gulp-watch": "^0.6.8", "gulp-concat-util": "~0.5.1", - "gulp-group-css-media-queries": "~1.0.1" + "gulp-group-css-media-queries": "~1.0.1", + "gulp-jade": "~0.11.0" }, "scripts": { "start": "gulp dev" diff --git a/reeddit.appcache b/reeddit.appcache index b363975..e4f5d7b 100644 --- a/reeddit.appcache +++ b/reeddit.appcache @@ -10,8 +10,6 @@ dist/app.min.css # images /img/add.png /img/alienHead.png -/img/cancel.png -/img/close.png /img/comment_24.png /img/darkdenim3.png /img/delete.png diff --git a/scripts/actions.js b/scripts/actions.js index 123dcee..d37ba25 100644 --- a/scripts/actions.js +++ b/scripts/actions.js @@ -187,7 +187,7 @@ tappable("#wide-refresh", { tappable("#sub-title", { onTap: function() { - if ((!isDesktop && loadingLinks) || isLargeScreen) return; + if ((!isDesktop && loadingLinks)) return; V.Actions.moveMenu(showingMenu ? move.left : move.right); } }); @@ -208,8 +208,11 @@ tappable("#more-links", { onTap: function() { doByCurrentSelection(function() { var url; - if (M.currentSelection.name.toUpperCase() === 'frontPage'.toUpperCase()) url = urlInit + "r/" + M.Subreddits.getAllString() + "/"; - else url = urlInit + "r/" + M.currentSelection.name + "/"; + if (M.currentSelection.name.toLowerCase() === 'frontpage') { + url = urlInit + "r/" + M.Subreddits.getAllSubsString() + "/"; + } else { + url = urlInit + "r/" + M.currentSelection.name + "/"; + } C.Posts.load(url, '&after=' + M.Posts.idLast); }, function() { var channel = M.Channels.getByName(M.currentSelection.name); @@ -262,7 +265,7 @@ tappable('.btn-add-sub', { subTitle = $(".subreddit-title", parent); subTitle.css("color", "#2b9900"); // 'adding sub' little UI feedback var newSub = subTitle.text(); - V.Subreddits.insert(newSub); + C.Subreddits.add(newSub); }, activeClass: 'button-active' }); @@ -373,25 +376,29 @@ V.detailWrap.on('click', '#comments-container a, #selftext a', function(ev) { }); // Swipes -V.detailView.swipeRight(function() { - if (isWideScreen) return; - location.hash = "#"; -}); - -V.mainView.swipeRight(function() { - if ((!isDesktop && loadingLinks) || isLargeScreen) return; - if (currentView === view.main) V.Actions.moveMenu(move.right); -}); - -V.mainView.swipeLeft(function() { - if ((!isDesktop && loadingLinks) || isLargeScreen) return; - if (showingMenu) V.Actions.moveMenu(move.left); -}); - -V.mainView.on("swipeLeft", ".link", function() { - if (isWideScreen) return; - if (!showingMenu) { - var id = $(this).data("id"); - goToComments(id); - } -}); +if (isMobile) { + if (!(isiPhone && isiOS7)) { + V.detailView.swipeRight(function() { + if (isWideScreen) return; + location.hash = "#"; + }); + } + + V.mainView.swipeRight(function() { + if ((!isDesktop && loadingLinks) || isLargeScreen) return; + if (currentView === view.main) V.Actions.moveMenu(move.right); + }); + + V.mainView.swipeLeft(function() { + if ((!isDesktop && loadingLinks) || isLargeScreen) return; + if (showingMenu) V.Actions.moveMenu(move.left); + }); + + V.mainView.on("swipeLeft", ".link", function() { + if (isWideScreen) return; + if (!showingMenu) { + var id = $(this).data("id"); + goToComments(id); + } + }); +} diff --git a/scripts/controller.js b/scripts/controller.js index 53b9a9e..6631ad8 100644 --- a/scripts/controller.js +++ b/scripts/controller.js @@ -40,6 +40,12 @@ var C = { // "Controller" V.Posts.show(links, paging); M.Posts.setList(links); + if (isWideScreen) { + var id = getCommentHash(); + if (id) { + V.Actions.setSelectedLink(id); + } + } } }, Comments: { @@ -171,18 +177,31 @@ var C = { // "Controller" loadPosts: function(sub) { if (sub !== M.currentSelection.name || editingSubs) { var url; - if (sub.toUpperCase() === 'frontPage'.toUpperCase()) url = urlInit + "r/" + M.Subreddits.getAllString() + "/"; - else url = urlInit + "r/" + sub + "/"; + if (sub.toLowerCase() === 'frontpage') { + url = urlInit + "r/" + M.Subreddits.getAllSubsString() + "/"; + } else { + url = urlInit + "r/" + sub + "/"; + } C.Posts.load(url); C.currentSelection.setSubreddit(sub); } V.Actions.setSubTitle(sub); }, - remove: function(sub) { - M.Subreddits.remove(sub); - V.Subreddits.remove(sub); - if (M.currentSelection.type === selection.sub && M.currentSelection.name === sub) C.currentSelection.setSubreddit('frontPage'); // If it was the current selection - }, + remove: function(sub) { + M.Subreddits.remove(sub); + V.Subreddits.remove(sub); + if (M.currentSelection.type === selection.sub && + M.currentSelection.name === sub) { // If it was the current selection + C.currentSelection.setSubreddit('frontPage'); + } + }, + add: function(newSub) { + if (M.Subreddits.listHasSub(newSub)) { + return; + } + M.Subreddits.add(newSub); + V.Subreddits.insert(newSub); + }, addFromNewForm: function() { var txtSub = $id("txt-new-sub"), subName = txtSub.value; @@ -191,6 +210,12 @@ var C = { // "Controller" V.Anims.shakeForm(); return; } + if (M.Subreddits.listHasSub(subName)) { + txtSub.value = ""; + txtSub.setAttribute("placeholder", subName + " already added!"); + V.Anims.shakeForm(); + return; + } subName = subName.trim(); diff --git a/scripts/functions.js b/scripts/functions.js index 037d5a5..b4ad3ac 100644 --- a/scripts/functions.js +++ b/scripts/functions.js @@ -1,20 +1,8 @@ -function checkWideScreen() { - return win.matchMedia("(min-width: 1000px)").matches; -} - -function checkLargeScreen() { - return win.matchMedia("(min-width: 490px)").matches; -} - function triggerClick(url) { var a = doc.createElement('a'); a.setAttribute("href", url); a.setAttribute("target", "_blank"); - //var dispatch = doc.createEvent("HTMLEvents"); - //dispatch.initEvent("click", true, true); - //a.dispatchEvent(dispatch); - var clickEvent = new MouseEvent("click", { "view": window, "bubbles": true, @@ -33,12 +21,19 @@ function openPost(url, id) { } } +function getCommentHash() { + var match = location.hash.match(/(#comments:)((?:[a-zA-Z0-9]*))/); + if (match && match[2]) { + return match[2]; + } +} + function goToCommentFromHash() { - var match = location.hash.match(/(#comments:)((?:[a-zA-Z0-9]*))/); - if (match && match[2]) { - var id = match[2]; - C.Comments.show(id); - } + var id = getCommentHash(); + C.Comments.show(id); + if (isWideScreen) { + V.Actions.setSelectedLink(id); + } } function checkImageLink(url) { @@ -101,8 +96,11 @@ function goToComments(id) { function refreshCurrentStream() { if (editingSubs) return; doByCurrentSelection(function() { // if it's subreddit - if (M.currentSelection.name.toUpperCase() === 'frontPage'.toUpperCase()) C.Posts.load(urlInit + "r/" + M.Subreddits.getAllString() + "/"); - else C.Posts.load(urlInit + "r/" + M.currentSelection.name + "/"); + if (M.currentSelection.name.toLowerCase() === 'frontpage') { + C.Posts.load(urlInit + "r/" + M.Subreddits.getAllSubsString() + "/"); + } else { + C.Posts.load(urlInit + "r/" + M.currentSelection.name + "/"); + } }, function() { // if it's channel C.Channels.loadPosts(M.Channels.getByName(M.currentSelection.name)); }); diff --git a/scripts/globals.js b/scripts/globals.js index d1f17ac..e0e3174 100644 --- a/scripts/globals.js +++ b/scripts/globals.js @@ -23,10 +23,7 @@ var editingSubs = false, loadingComments = false, loadingLinks = false, currentThread, - isWideScreen = checkWideScreen(), - isLargeScreen = checkLargeScreen(), - isiPad, - scrollFix, + iPadScrollFix, currentSortingChoice = 'hot', mnml = false, updateBackup = 1, @@ -55,9 +52,23 @@ var editingSubs = false, }, currentView = view.main; -var defaultSubs = ["frontPage", "pics", "IAmA", "AskReddit", "worldNews", "todayilearned", "tech", "science", "reactiongifs", "books", "explainLikeImFive", "videos", "AdviceAnimals", "funny", "aww", "earthporn"]; +var defaultSubs = ["frontPage", "all", "pics", "IAmA", "AskReddit", "worldNews", "todayilearned", "tech", "science", "reactiongifs", "books", "explainLikeImFive", "videos", "AdviceAnimals", "funny", "aww", "earthporn"]; var defaultChannel = { name: "Media", subs: ["movies", "television", "music", "games"] }; + +// Breakpoints +var wideScreenBP = win.matchMedia("(min-width: 1000px)"), + largeScreenBP = win.matchMedia("(min-width: 490px)"), + isWideScreen = wideScreenBP.matches, + isLargeScreen = largeScreenBP.matches; + +// Browser Detection +var UA = win.navigator.userAgent, + isMobile = !isDesktop, + isiPhone = /iP(hone|od)/.test(UA), + isiPad = /iPad/.test(UA), + isiOS = isiPad || isiPhone, + isiOS7 = isiOS && parseInt(UA.match(/ OS (\d+)_/i)[1], 10) >= 7; diff --git a/scripts/init.js b/scripts/init.js index 5284d34..c0ca838 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -20,7 +20,7 @@ doByCurrentSelection( // Load links if (M.currentSelection.name.toUpperCase() === 'frontPage'.toUpperCase()) { C.currentSelection.setSubreddit('frontPage'); - C.Posts.load(urlInit + "r/" + M.Subreddits.getAllString() + "/"); + C.Posts.load(urlInit + "r/" + M.Subreddits.getAllSubsString() + "/"); } else { C.Posts.load(urlInit + "r/" + M.currentSelection.name + "/"); } @@ -53,19 +53,18 @@ if (!isDesktop) { doc.getElementsByTagName('header')[0].addEventListener(touch, function(e) { if (showingMenu) e.preventDefault(); // Cheat temporal, para evitar que las vistas hagan overflow }, false); - isiPad = /iPad/.test(UA); if (isiPad) { - scrollFix = function() { + iPadScrollFix = function() { // This slight height change makes the menu container 'overflowy', to allow scrolling again on iPad - weird bug var nextHeight = '36px' === $('.menu-desc').css('height') ? '35px' : '36px'; setTimeout(function() { $('.menu-desc').css('height', nextHeight); }, 500); }; - scrollFix(); + iPadScrollFix(); } - // apply iOS 7+ theme - if (/iPhone|iPod|iPad/.test(UA) && parseInt(UA.match(/ OS (\d+)_/i)[1], 10) >= 7) { + if (isiOS7) { + // apply iOS 7+ theme if (!isMnml) V.Actions.switchMnml(true, true); body.classList.add("ios7"); } diff --git a/scripts/listeners.js b/scripts/listeners.js index 4d27f15..e319f94 100644 --- a/scripts/listeners.js +++ b/scripts/listeners.js @@ -19,23 +19,52 @@ if (win.applicationCache) // Do stuff after finishing resizing the windows win.addEventListener("resizeend", function() { - isWideScreen = checkWideScreen(); - isLargeScreen = checkLargeScreen(); + isWideScreen = wideScreenBP.matches; + isLargeScreen = largeScreenBP.matches; scrollTop(); if (isLargeScreen && showingMenu) V.Actions.moveMenu(move.left); - if (isiPad) scrollFix(); + if (isiPad) iPadScrollFix(); }, false); +if (isiPhone && isiOS7) { + var hasSwiped = false, + swipeClass = 'from-swipe'; + document.addEventListener('touchstart', function(ev) { + var touchX = ev.targetTouches[0].clientX; + hasSwiped = (touchX < 10 || touchX > window.innerWidth - 10); + }); + document.addEventListener('touchend', function() { + hasSwiped = false; + }); +} + // Pseudo-hash-router win.addEventListener('hashchange', function() { - if (location.hash === "") { - V.Actions.backToMainView(); - $('.link.link-selected').removeClass('link-selected'); + if (isiPhone && isiOS7) { + // Switch `transition-duration` class, + // to stop animation when swiping + if (hasSwiped) { + V.mainView.addClass(swipeClass); + V.detailView.addClass(swipeClass); + V.btnNavBack.addClass(swipeClass); + V.subtitle.addClass(swipeClass); + } else { + V.mainView.removeClass(swipeClass); + V.detailView.removeClass(swipeClass); + V.btnNavBack.removeClass(swipeClass); + V.subtitle.removeClass(swipeClass); + } + hasSwiped = false; + } + // Handle Hash Changes + if (location.hash === "") { // To Main View + V.Actions.backToMainView(); + V.Actions.clearSelectedLink(); V.Actions.setDetailFooter(""); - setTimeout(function() { - V.detailWrap.empty(); - }, isWideScreen ? 1 : 301); - } else { + setTimeout(function() { + V.detailWrap.empty(); + }, isWideScreen ? 1 : 301); + } else { // To Comment View goToCommentFromHash(); } }, false); diff --git a/scripts/model.js b/scripts/model.js index 29212f6..b65d63e 100644 --- a/scripts/model.js +++ b/scripts/model.js @@ -31,13 +31,11 @@ var M = { // Model }, Subreddits: { list: [], - add: function(sub) { - if (!M.Subreddits.listHasSub(sub)) { - M.Subreddits.list.push(sub); - store.setItem("subreeddits", JSON.stringify(M.Subreddits.list)); - updateBackup = 1; - } - }, + add: function(sub) { + M.Subreddits.list.push(sub); + store.setItem("subreeddits", JSON.stringify(M.Subreddits.list)); + updateBackup = 1; + }, setList: function(subs) { M.Subreddits.list = subs; store.setItem("subreeddits", JSON.stringify(M.Subreddits.list)); @@ -49,18 +47,29 @@ var M = { // Model store.setItem("subreeddits", JSON.stringify(M.Subreddits.list)); updateBackup = 1; }, - listHasSub: function(sub) { - if (M.Subreddits.list) { - var i = M.Subreddits.list.indexOf(sub); - return i > -1; - } - return false; - }, - getAllString: function() { - var allSubs = ''; + listHasSub: function(newSub) { + if (M.Subreddits.list) { + newSub = newSub.toLowerCase(); + for(var i = M.Subreddits.list.length; --i;) { + var sub = M.Subreddits.list[i]; + if (sub.toLowerCase() === newSub) { + return true; + } + } + return false; + } + return false; + }, + getAllSubsString: function() { + var allSubs = '', + frontPage = 'frontpage', + all = 'all'; for (var i = 0; i < M.Subreddits.list.length; i++) { - var sub = M.Subreddits.list[i]; - if (sub.toUpperCase() === 'frontPage'.toUpperCase()) continue; + var sub = M.Subreddits.list[i].toLowerCase(); + if (sub === frontPage || + sub === all) { + continue; + } allSubs += sub + '+'; } return allSubs.substring(0, allSubs.length - 1); @@ -121,4 +130,4 @@ var M = { // Model store.setItem('currentSelection', JSON.stringify(M.currentSelection)); } } -}; \ No newline at end of file +}; diff --git a/scripts/modules/sort-switch.js b/scripts/modules/sort-switch.js new file mode 100644 index 0000000..3c87b2f --- /dev/null +++ b/scripts/modules/sort-switch.js @@ -0,0 +1,29 @@ +(function() { + 'use strict'; + + // Imports + /* global C */ + + var el = { + main: $('.js-sort-switch-main'), + wrap: $('.js-sort-switch-wrap') + }; + + var classes = { + new: 'sort-switch--new' + }; + + // Initial State + var isHot = true; + + el.main.click(function() { + isHot = !isHot; + C.Sorting.change(isHot ? 'hot' : 'new'); + if (isHot) { + el.main.removeClass(classes.new); + } else { + el.main.addClass(classes.new); + } + }); + +})(); diff --git a/scripts/templates.js b/scripts/templates.js index 986d229..7d0c549 100644 --- a/scripts/templates.js +++ b/scripts/templates.js @@ -12,12 +12,12 @@ var T = { // Templates }, linkSummary: "", botonAgregarSubManual: "
Insert Manually
Create Channel
", - formAgregarSubManual: '
Add Subreddit
close
', - formAddNewChannel: '
Add Channel
close
Add additional subreddit
', - formEditChannel: '
Update Channel
close
Add additional subreddit
', + formAgregarSubManual: '
Add Subreddit
×
', + formAddNewChannel: '
Add Channel
×
Add additional subreddit
', + formEditChannel: '
Update Channel
×
Add additional subreddit
', botonCargarMasSubs: "
More
", noLink: "No Post Selected", - about: "
close

@ReedditApp

Built by Bernardo Baquero Stand

", - exportData: "
close

Export Data

You can back-up your local subscriptions and then import them to any other Reeddit instance, or just restore them.

Save to Dropbox
", - importData: "
close

Import Data

Load the subscriptions from another Reeddit instance.

Once you choose the reeddit data file, Reeddit will refresh with the imported data.

Import from Dropbox
" + about: "
×

@ReedditApp

Built by Bernardo Baquero Stand

", + exportData: "
×

Export Data

You can back-up your local subscriptions and then import them to any other Reeddit instance, or just restore them.

Save to Dropbox
", + importData: "
×

Import Data

Load the subscriptions from another Reeddit instance.

Once you choose the reeddit data file, Reeddit will refresh with the imported data.

Import from Dropbox
" }; diff --git a/scripts/view.js b/scripts/view.js index 59e2d52..abeaa33 100644 --- a/scripts/view.js +++ b/scripts/view.js @@ -40,10 +40,7 @@ var V = { // View if (subs instanceof Array) { subsList.append(Mustache.to_html(T.Subreddits.list, subs)); } else { - if (!M.Subreddits.listHasSub(subs)) { - subsList.append($("
  • ").attr("data-name", subs).append($("

    ").addClass("sub").addClass((active ? "sub-active" : "")).text(subs))); - M.Subreddits.add(subs); - } + subsList.append($("

  • ").attr("data-name", subs).append($("

    ").addClass("sub").addClass((active ? "sub-active" : "")).text(subs))); } }, remove: function(sub) { @@ -112,6 +109,10 @@ var V = { // View V.Anims.slideFromLeft(); }, moveMenu: function(direction) { + if (isiPhone && isiOS7) { + V.mainView.removeClass(swipeClass); + V.detailView.removeClass(swipeClass); + } if (direction === move.left) { V.mainView.removeClass(css.showMenu); setTimeout(function() { @@ -222,10 +223,10 @@ var V = { // View var bntMnml = $("#mnml"); if (mnml) { body.classList.add(css.mnml); - bntMnml.text("Mnml: on"); + bntMnml.text("Theme: mnml"); } else { body.classList.remove(css.mnml); - bntMnml.text("Mnml: off"); + bntMnml.text("Theme: Classic"); } if (save) store.setItem("mnml", mnml); }, @@ -242,7 +243,14 @@ var V = { // View noBounce: true }; V.Actions.showModal(imageViewer, false, config); - } + }, + setSelectedLink: function(id) { + $(".link.link-selected").removeClass("link-selected"); + $('.link[data-id="' + id + '"]').addClass('link-selected'); + }, + clearSelectedLink: function() { + $('.link.link-selected').removeClass('link-selected'); + } }, Comments: { setRest: function(id, refresh) { @@ -252,12 +260,6 @@ var V = { // View if (!refresh && currentView !== view.comments) V.Anims.slideFromRight(); - if (isWideScreen) { - // Refresh active link indicator - $(".link.link-selected").removeClass("link-selected"); - $('.link[data-id="' + id + '"]').addClass('link-selected'); - } - V.headerSection.empty().append(V.title); V.title.text(postTitle); V.subtitle.addClass('invisible'); diff --git a/styles/_base.scss b/styles/_base.scss index 091cc0f..0cf64ca 100644 --- a/styles/_base.scss +++ b/styles/_base.scss @@ -5,18 +5,24 @@ $footer-height: 32px; // Colors $white: #ffffff; $black: #333333; -$red: #d43030; +$red: #c6544f; $blue-grayish: #7a9abd; $black-blueish: #3d525e; $red-comments: $red; $c_comments-link: $blue-grayish; $c_comments-link-visited: #a3adce; +$mnml-bars-bg-color: #d7d7d7; +$ios7-bars-bg-color: #f8f8f8; $gutter: 10px; $corner-radius: 3px; +// Z-Indexes +$z-view: 1; +$z-options: 2; + // Media Query Break Points $bp-small: 350px; $bp-large: 490px; @@ -52,7 +58,7 @@ $detail-view-wide-x: calc(100% - #{($menu-view-wide-x + $main-view-wide-x)}); } %block-spacing { - padding: 10px; + padding: $gutter; } %full-width { diff --git a/styles/_buttons.scss b/styles/_buttons.scss index 28e392a..66773c7 100644 --- a/styles/_buttons.scss +++ b/styles/_buttons.scss @@ -47,6 +47,14 @@ background-size: 24px; margin: 0 auto; + @include mnml-theme { + opacity: .8; + } + + @include mnml-theme(iOS7) { + opacity: .6; + } + @include break-point-hdpi { background-image: url('../img/comment_48.png'); opacity: .7; @@ -55,6 +63,10 @@ .button-active { background-color: #ddd; + + @include mnml-theme { + background-color: #ccc; + } } .comments-button { @@ -72,6 +84,11 @@ .list-button-active { background-image: linear-gradient(#ccc 0%, #777 100%) !important; color: white !important; + + @include mnml-theme { + background-color: #ccc !important; + background-image: none !important; + } } .list-button { @@ -86,6 +103,10 @@ display: block; width: 80%; margin: 0 auto; + + @include mnml-theme { + background-color: transparent; + } } } @@ -101,6 +122,12 @@ width: 50%; text-align: center; display: inline-block; + + @include mnml-theme { + background-color: #ddd; + border: 1px solid #bbb; + box-shadow: 0 1px 0 #fff; + } } div:first-child { @@ -128,6 +155,13 @@ box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset, rgba(255, 255, 255, .3) 0 25px 30px -12px inset, rgba(0, 0, 0, .6) 0 1px 2px; + + @include mnml-theme { + background-color: #d5d5d8; + border: 1px solid #bbb; + background-image: none; + box-shadow: none; + } } .btn-general { @@ -136,6 +170,10 @@ border-radius: 5px; font-weight: 700; text-align: center; + + @include mnml-theme { + border-radius: 4px; + } } .btn-general-active { @@ -143,6 +181,12 @@ box-shadow: 0 2px 7px black inset, rgba(255, 255, 255, .4) 0 1px 0; color: #f5f5f5; + + @include mnml-theme { + background-color: #ccc; + background-image: none; + box-shadow: none; + } } #btn-add-new-channel { diff --git a/styles/_footer.scss b/styles/_footer.scss index 5421017..b2d8f96 100644 --- a/styles/_footer.scss +++ b/styles/_footer.scss @@ -8,22 +8,33 @@ box-shadow: inset 0 1px 1px #eee; background-image: linear-gradient(#d5d5d5, #b3b3b3); + @include mnml-theme { + background-color: $mnml-bars-bg-color; + box-shadow: 0 -1px 4px rgba(0, 0, 0, .2); + } + + @include mnml-theme(iOS7) { + background-color: $ios7-bars-bg-color; + border-top: 1px solid #bbb; + } + @include break-point-min($bp-wide) { display: block; } +} - p { - line-height: ($footer-height - 1px); - margin: 0 auto; - text-align: center; - font-size: 14px; - font-weight: bold; - width: 70%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - cursor: default; - } +.footer-sub-title, +.footer-post-title { + line-height: ($footer-height - 1px); + margin: 0 auto; + text-align: center; + font-size: 14px; + font-weight: bold; + width: 70%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: #444; } .btn-footer { @@ -41,8 +52,10 @@ } #detail-close { - background-image: url('../img/close.png'); - opacity: .7; - left: 0; - background-size: 18px; + left: 0; + font-size: 26px; + font-weight: bold; + line-height: 1em; + text-align: center; + color: #444; } diff --git a/styles/_header.scss b/styles/_header.scss index 19ec985..92ac064 100644 --- a/styles/_header.scss +++ b/styles/_header.scss @@ -15,6 +15,18 @@ header { width: 70%; } + @include mnml-theme { + border-bottom: 1px solid #bbb; + background-color: $mnml-bars-bg-color; + border-top: 0; + background-image: none; + box-shadow: 0 1px 4px rgba(0, 0, 0, .2); + } + + @include mnml-theme(iOS7) { + background-color: $ios7-bars-bg-color; + } + @include break-point-min($bp-small) { background-color: #e7e7e7; border-bottom: 1px solid #333; @@ -56,6 +68,14 @@ header { background-repeat: no-repeat; background-position: 50%; margin: 0 auto; + + @include mnml-theme { + opacity: .7; + } + + @include mnml-theme(iOS7) { + opacity: .5; + } } #main-title { @@ -69,6 +89,10 @@ header { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + + @include mnml-theme { + top: 0; + } } .sub-title { @@ -81,6 +105,18 @@ header { &:active { background-color: rgba(0, 0, 0, .3); } + + @include mnml-theme { + margin: 0; + padding: 0 10px; + line-height: $header-height; + text-shadow: none; + border-radius: 0; + } + + @include break-point-min($bp-large) { + pointer-events: none; + } } #wide-refresh { diff --git a/styles/_link.scss b/styles/_link.scss index e28a854..0a6af41 100644 --- a/styles/_link.scss +++ b/styles/_link.scss @@ -16,6 +16,10 @@ border-bottom: 1px solid #ccc; width: 100%; + @include mnml-theme { + border-top: 0; + } + &:first-child { border-top: 0; } @@ -35,6 +39,10 @@ margin: 0; border-radius: 5px; box-shadow: inset 0 1px 3px #333; + + @include mnml-theme { + box-shadow: none; + } } } @@ -63,6 +71,10 @@ .link-selected, .option.tappable-active { background-image: linear-gradient(#4286F5, #194FDB); + + @include mnml-theme { + background-image: linear-gradient(#599ad2, #3d6fba); + } } .link-active, diff --git a/styles/_menu.scss b/styles/_menu.scss index f15c304..e971d89 100644 --- a/styles/_menu.scss +++ b/styles/_menu.scss @@ -15,6 +15,11 @@ border-top: 1px solid rgba(0, 0, 0, .5); box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px inset; text-align: center; + + @include mnml-theme { + box-shadow: none; + border-top: 0; + } } .btn-edit-sub { @@ -42,6 +47,13 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + @include break-point-min($bp-wide) { + + @include mnml-theme { + font-weight: 500; + } + } } .channel { @@ -52,6 +64,13 @@ > p { color: whiteSmoke; margin: 0; + + @include break-point-min($bp-wide) { + + @include mnml-theme { + font-weight: 500; + } + } } > div { @@ -66,20 +85,31 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + + @include break-point-min($bp-wide) { + + @include mnml-theme { + font-weight: 500; + } + } } } .channel-active { border-left: 3px solid #4286F5; + @include mnml-theme { + border-left: 3px solid #3d6fba; + } + > p { - text-shadow: 0 0 10px #CCC; + text-shadow: 0 0 10px #ccc; } } .sub-active { - text-shadow: 0 0 10px #CCC; - border-left: 3px solid #4286F5; + text-shadow: 0 0 10px #ccc; + border-left: 3px solid #4286f5; } #menu-container { @@ -92,6 +122,11 @@ height: 100%; background-color: #363636; background-image: url('../img/darkdenim3.png'); + + @include mnml-theme { + background-color: #262b30; + background-image: url(""); + } } #menu-container, @@ -130,6 +165,13 @@ box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset; cursor: default; position: relative; + + @include break-point-min($bp-wide) { + + @include mnml-theme { + font-weight: 500; + } + } } .option { @@ -142,15 +184,11 @@ &:last-child { margin-bottom: 15px; } -} -#sorting p { - color: whiteSmoke; - margin: 0; - padding: 8px 10px; - text-transform: capitalize; -} + @include break-point-min($bp-wide) { -.sorting-choice { - border-left: 3px solid; + @include mnml-theme { + font-weight: 500; + } + } } diff --git a/styles/_mixins.scss b/styles/_mixins.scss index 506cee4..8844afa 100644 --- a/styles/_mixins.scss +++ b/styles/_mixins.scss @@ -7,6 +7,37 @@ width: 100%; } +@mixin position($position, $type, $margins: 0) { + position: $position; + + @if $type == top-left { + top: $margins; + left: $margins; + } + + @if $type == top-right { + top: $margins; + right: $margins; + } + + @if $type == bottom-left { + bottom: $margins; + left: $margins; + } + + @if $type == bottom-right { + bottom: $margins; + right: $margins; + } + + @if $type == stretched { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + // Media Query Break Points @mixin break-point-min($width) { @@ -28,3 +59,28 @@ @content; } } + +// Theme Breakpoints + +@mixin mnml-theme($type: null) { + + @at-root { + @if ($type == null) { + .mnml & { + @content; + } + } + + @if ($type == root) { + &.mnml { + @content; + } + } + + @if ($type == iOS7) { + .mnml.ios7 & { + @content; + } + } + } +} diff --git a/styles/_options-menu.scss b/styles/_options-menu.scss new file mode 100644 index 0000000..dc64ee6 --- /dev/null +++ b/styles/_options-menu.scss @@ -0,0 +1,17 @@ +.options-menu { + @include size(100%, $header-height); + transform: translateY(calc(-100% - #{$header-height})); + background-color: $black; + transition: transform 200ms; + z-index: $z-options; + color: $white; + position: absolute; + + &--shown { + transform: translateY(0%); + } + + @include break-point-min($bp-large) { + display: none; + } +} diff --git a/styles/_post-comments.scss b/styles/_post-comments.scss index 64ae2b5..4ce2d38 100644 --- a/styles/_post-comments.scss +++ b/styles/_post-comments.scss @@ -44,10 +44,8 @@ position: relative; &::before { + @include position(absolute, top-left); content: 'OP'; - position: absolute; - top: 0; - left: 0; color: $white; background-color: $red-comments; border: 1px solid $red-comments; @@ -103,9 +101,9 @@ padding: 10px 0 0; &::before { + @include size(100%, 300px); content: ''; position: absolute; - @include size(100%, 300px); background-color: inherit; transform: translateY(-100%); background-image: url('../img/alienHead.png'); @@ -115,6 +113,10 @@ background-size: 25%; } + @include mnml-theme { + background-color: #262b30; + } + p { margin: 0; padding-left: 10px; @@ -143,6 +145,10 @@ font-weight: 700; font-size: 13px; display: inline; + + @include mnml-theme(iOS7) { + color: #eb4d5c; + } } #summary-author { @@ -169,6 +175,10 @@ $gray-dark: #333; padding-bottom: 10px; padding-top: 2px; border-bottom: 1px solid $gray-dark; + + @include mnml-theme { + border: 0; + } } #summary-extra { @@ -179,6 +189,11 @@ $gray-dark: #333; padding: 0 10px; width: 100%; border-top: 1px solid #5d5d5d; + + @include mnml-theme { + background-color: rgba(0, 0, 0, 0.4); + border: 0; + } } #summary-comment-num { @@ -207,6 +222,11 @@ $gray-dark: #333; box-shadow: inset 0 1px 1px #FFF, 0 0px 7px rgba(0, 0, 0, 0.3); border: 1px solid $gray; + @include mnml-theme { + border: 0; + box-shadow: none; + } + p { margin-top: 5px; diff --git a/styles/_sort-switch.scss b/styles/_sort-switch.scss new file mode 100644 index 0000000..da7a456 --- /dev/null +++ b/styles/_sort-switch.scss @@ -0,0 +1,72 @@ +// Widget +$green: #7ab636; +$red: #c6544f; +$black: #444; + +$width: 3.2em; +$height: 1.6em; + +.sorter-wrap { + position: absolute; + margin: { + top: 5px; + left: $gutter; + } +} + +.sort-switch { + font-size: 13px; // main size + cursor: pointer; + + &__overlay { + overflow: hidden; + width: $width; + height: $height; + border-radius: .25em; + } + + &__wrap { + display: flex; + width: $width * 2; + transition: all 250ms ease; + // default - hot + transform: translateX(0%); + } + + &--new &__wrap { + transform: translateX(-50%); + } + + &__label { + $label-color: $black; + $height-label: $height - .1em; + @include size($width, height-label); + color: $label-color; + font-weight: 600; + line-height: $height; + text-transform: capitalize; + position: relative; + background: { + repeat: no-repeat; + position: 85% center; + size: 1em; + } + + &::after { + position: absolute; + font-size: 2em; + } + + &--hot::after { + content: "\2022"; + color: $red; + left: 1em; + } + + &--new::after { + content: "\2022"; + color: $green; + left: 1.2em; + } + } +} diff --git a/styles/_themes.scss b/styles/_themes.scss index 0e41d76..e69de29 100644 --- a/styles/_themes.scss +++ b/styles/_themes.scss @@ -1,166 +0,0 @@ -.mnml { // Minimal Theme - - $bars-bg-color: #d7d7d7; - - font-family: -apple-system-font, 'Helvetica Neue', Helvetica, Arial, sans-serif; - - #link-summary { - background-color: #262b30; - } - - #summary-extra { - background-color: rgba(0, 0, 0, 0.4); - border: 0; - } - - #summary-footer { - border: 0; - } - - #selftext { - border: 0; - box-shadow: none; - } - - .channel-active { - border-left: 3px solid #3d6fba; - } - - #menu-container { - background-color: #262b30; - background-image: url(""); - } - - .link-wrap { - border-top: 0; - } - - .link-thumb div { - box-shadow: none; - } - - .link-active, - .link-selected, - .option.tappable-active { - background-image: linear-gradient(#599ad2, #3d6fba); - } - - .list-button > span { - background-color: transparent; - } - - .top-buttons > div { - background-color: #ddd; - border: 1px solid #bbb; - box-shadow: 0 1px 0 #fff; - } - - .comments-button, - .top-buttons > div, - .list-button > span, - .btn-general { - background-color: #d5d5d8; - border: 1px solid #bbb; - background-image: none; - box-shadow: none; - } - - .btn-general { - border-radius: 4px; - } - - .btn-general-active { - background-color: #ccc; - background-image: none; - box-shadow: none; - } - - header { - border-bottom: 1px solid #bbb; - background-color: $bars-bg-color; - border-top: 0; - background-image: none; - box-shadow: 0 1px 4px rgba(0, 0, 0, .2); - } - - #header-icon { - opacity: .7; - } - - .main-view, - .detail-view { - background-color: #f5f5f5; - } - - .comments-icon { - opacity: .8; - } - - .button-active { - background-color: #ccc; - } - - .replies-button-active, - .list-button-active { - background-color: #ccc !important; - background-image: none !important; - } - - #main-title { - top: 0; - } - - .sub-title { - margin: 0; - padding: 0 10px; - line-height: $header-height; - text-shadow: none; - border-radius: 0; - } - - .subreddit, - .item-to-edit { - border-top: 0; - } - - #edit-subs { - box-shadow: none; - border-top: 0; - } - - .view-footer { - background-color: $bars-bg-color; - box-shadow: 0 -1px 4px rgba(0, 0, 0, .2); - } - - &.ios7 { - - $bars-bg-color: #f8f8f8; - - header { - background-color: $bars-bg-color; - } - - #header-icon { - opacity: .5; - } - - .main-view, - .detail-view { - background-color: #fff; - } - - .comments-icon { - opacity: .6; - } - - #summary-domain { - color: #eb4d5c; - } - - .view-footer { - background-color: $bars-bg-color; - border-top: 1px solid #bbb; - } - } -} diff --git a/styles/_view.scss b/styles/_view.scss index 86e0ea1..3984012 100644 --- a/styles/_view.scss +++ b/styles/_view.scss @@ -1,12 +1,12 @@ .view { + @include full-width; transition-duration: 300ms; position: absolute; - width: 100%; top: $header-height; bottom: 0; left: 0; right: 0; - z-index: 1; + z-index: $z-view; overflow-y: auto; -webkit-overflow-scrolling: touch; @@ -20,11 +20,23 @@ perspective: 1000; backface-visibility: hidden; background-color: $white; + + @include mnml-theme { + background-color: #f5f5f5; + } + + @include mnml-theme(iOS7) { + background-color: #fff; + } } .main-view { transform: translate3d(-100%, 0, 0); + &.show-menu { + transform: translate3d(140px, 0px, 0px); + } + @include break-point-min($bp-large) { width: $main-view-large; left: $menu-view-large; @@ -89,14 +101,15 @@ } } +.show-view { + transform: translate3d(0, 0, 0); +} + #main-menu { box-shadow: inset -3px 0 10px black; - height: calc(100% - 32px); + height: calc(100% - #{$footer-height}); } -.main-view.show-menu { - transform: translate3d(140px, 0px, 0px); -} #main-overflow { width: 100%; diff --git a/styles/app.scss b/styles/app.scss index c147eca..862c29e 100644 --- a/styles/app.scss +++ b/styles/app.scss @@ -18,6 +18,13 @@ body { text-size-adjust: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; position: relative; + + @include mnml-theme(root) { + font-family: -apple-system-font, 'Helvetica Neue', Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; // [1] + -moz-osx-font-smoothing: grayscale; // [1] + } + // [1] Font-smoothing } a { @@ -30,6 +37,8 @@ a { @import 'link'; @import 'header'; @import 'post-comments'; +@import 'options-menu'; +@import 'sort-switch'; /*--- Subreddits ---*/ @@ -40,6 +49,10 @@ a { border-top: 1px solid white; width: 100%; + @include mnml-theme { + border-top: 0; + } + > div:first-child { width: 85%; padding: 10px 5px 10px 0; @@ -165,6 +178,10 @@ a { border-top: 1px solid white; height: 60px; + @include mnml-theme { + border-top: 0; + } + > p { width: 85%; text-transform: capitalize; @@ -199,16 +216,10 @@ a { } } -.show-view { - transform: translate3d(0, 0, 0); -} - #modal { @include size(100%); + @include position(absolute, top-left); transition-duration: 300ms; - position: absolute; - top: 0; - left: 0; background-color: rgba(0,0,0,.7); opacity: 0; z-index: 9999; @@ -219,17 +230,17 @@ a { } .close-form { - position: absolute; - top: -30px; - z-index: 10001; - right: 0; - color: whiteSmoke; - background-image: url('../img/cancel.png'); - width: 60px; - background-repeat: no-repeat; - padding-left: 20px; - font-weight: 700; - background-size: 18px; + $size: 35px; + @include size($size); + position: absolute; + top: -$size; + right: 0; + z-index: 10001; + color: #F5F5F5; + font-weight: 700; + font-size: 30px; + line-height: 28px; + text-align: center; } .form-left-corner { @@ -330,6 +341,9 @@ a { font-weight: bold; } +.from-swipe { // for iPhone iOS 7+ "hack" + transition-duration: 0s !important; +} + @import 'animations'; @import 'footer'; -@import 'themes'; diff --git a/styles/desk.scss b/styles/desk.scss index e892d38..1b0946f 100644 --- a/styles/desk.scss +++ b/styles/desk.scss @@ -37,6 +37,12 @@ cursor: pointer; } +#detail-close, +.footer-sub-title, +.footer-post-title { + cursor: default; +} + #link-summary a:hover #summary-title { text-shadow: 0 1px 7px whiteSmoke; } diff --git a/templates/detail-view.jade b/templates/detail-view.jade new file mode 100644 index 0000000..09ef031 --- /dev/null +++ b/templates/detail-view.jade @@ -0,0 +1,5 @@ +section.view.detail-view + + section#detail-wrap.wrapper.wrapper--detail + + include footer-detail diff --git a/templates/footer-detail.jade b/templates/footer-detail.jade new file mode 100644 index 0000000..39b3a62 --- /dev/null +++ b/templates/footer-detail.jade @@ -0,0 +1,7 @@ +div#detail-footer.view-footer + + div#detail-close.btn-footer.btn-to-main.hide × + + p#footer-post.footer-post-title + + div(class="btn-footer footer-refresh btn-refresh hide", data-origin="footer-detail") diff --git a/templates/footer-main.jade b/templates/footer-main.jade new file mode 100644 index 0000000..b9c8b19 --- /dev/null +++ b/templates/footer-main.jade @@ -0,0 +1,7 @@ +div#main-footer.view-footer + + include sort-switch + + p#footer-sub.footer-sub-title + + div(class="btn-footer footer-refresh btn-refresh", data-origin="footer-main") diff --git a/templates/ga-script.jade b/templates/ga-script.jade new file mode 100644 index 0000000..d931aea --- /dev/null +++ b/templates/ga-script.jade @@ -0,0 +1 @@ +script var loc=location.hostname;if(loc==="berbaquero.github.io"||loc==="berbaquero.github.com"||loc==="reedditapp.com"||loc==="berbaquero.com"){var _gaq=[["_setAccount","UA-36097133-1"],["_trackPageview"]];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src="//www.google-analytics.com/ga.js";s.parentNode.insertBefore(g,s)}(document,"script"))} diff --git a/templates/head.jade b/templates/head.jade new file mode 100644 index 0000000..b0f8a68 --- /dev/null +++ b/templates/head.jade @@ -0,0 +1,17 @@ +head + meta(charset="utf-8") + + title Reeddit + + meta(name="description", content="Elastic, minimal Reddit web-app reader client.") + meta(name="author", content="Bernardo Baquero Stand") + meta(name="viewport", content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui") + meta(name="mobile-web-app-capable", content="yes") + + link(rel="icon", type="image/png", href="img/favicon.png") + link(rel="apple-touch-icon-precomposed", sizes="144x144", href="img/icon144.png") + + link(rel="stylesheet", href="dist/libs.css") + link(rel="stylesheet", href="dist/app.min.css") + + include ga-script diff --git a/templates/header.jade b/templates/header.jade new file mode 100644 index 0000000..a8bdbd6 --- /dev/null +++ b/templates/header.jade @@ -0,0 +1,15 @@ +header + + div#main-title + p#sub-title.sub-title + + div#nav-back.header-corner.invisible + div.btn-to-main.btn-corner.back-arrow-btn + span.back-arrow-icon + + div#title-head + div#header-icon + p#title + + div.header-corner + div.btn-refresh.btn-corner.refresh-icon diff --git a/templates/index.jade b/templates/index.jade new file mode 100644 index 0000000..9ed6ec5 --- /dev/null +++ b/templates/index.jade @@ -0,0 +1,11 @@ +doctype html +html(manifest="reeddit.appcache") + include head + + body + include header + include menu + include main-view + include detail-view + + include main-scripts diff --git a/templates/main-scripts.jade b/templates/main-scripts.jade new file mode 100644 index 0000000..c3872d1 --- /dev/null +++ b/templates/main-scripts.jade @@ -0,0 +1,13 @@ +script. + var isDesktop = !/iPhone|iPod|iPad|Android|Mobile/.test(navigator.userAgent); + if (isDesktop) { + var deskLink = document.createElement("link"); + deskLink.rel = "stylesheet"; + deskLink.href = "dist/desk.css"; + document.head.appendChild(deskLink); + } + +script(src="dist/libs.js") +script(src="dist/app.min.js") + +script(src="https://www.dropbox.com/static/api/1/dropins.js", id="dropboxjs", data-app-key="yiu8cok9mknii0n") diff --git a/templates/main-view.jade b/templates/main-view.jade new file mode 100644 index 0000000..7564f66 --- /dev/null +++ b/templates/main-view.jade @@ -0,0 +1,5 @@ +section.view.main-view.show-view + + section#main-wrap.wrapper + + include footer-main diff --git a/templates/menu.jade b/templates/menu.jade new file mode 100644 index 0000000..3a18202 --- /dev/null +++ b/templates/menu.jade @@ -0,0 +1,23 @@ +nav#menu-container + + div.view + div#edit-subs + span#btn-add-subs.btn-edit-sub + + span#btn-edit-subs.btn-edit-sub ••• + + div#main-menu.wrapper + div.menu-desc Subreddits + span#btn-new-sub.btn-side-menu-add + + + ul#subs + + div.menu-desc Channels + span#btn-new-channel.btn-side-menu-add + + + ul#channels + + div.menu-desc Options + div.option#about About + div.option#exp-data Export Data + div.option#imp-data Import Data + div.option#mnml Theme diff --git a/templates/sort-switch.jade b/templates/sort-switch.jade new file mode 100644 index 0000000..d975dd3 --- /dev/null +++ b/templates/sort-switch.jade @@ -0,0 +1,7 @@ +div.sorter-wrap + + div.sort-switch.js-sort-switch-main + div.sort-switch__overlay + div.sort-switch__wrap.js-sort-switch-wrap + span.sort-switch__label.sort-switch__label--hot hot + span.sort-switch__label.sort-switch__label--new new diff --git a/templates/sort-switcher.html b/templates/sort-switcher.html new file mode 100644 index 0000000..e69de29 diff --git a/templates/sort-switcher.jade b/templates/sort-switcher.jade new file mode 100644 index 0000000..03db5c3 --- /dev/null +++ b/templates/sort-switcher.jade @@ -0,0 +1,7 @@ +mixin sortSwitch(origin) + div(class='sorter-container sorter--hot js-sort-container', data-origin=origin) + span(class='sorter-label sorter-label--hot', data-type='hot') Hot + span.sorter-icon + span(class='sorter-label sorter-label--new', data-type='new') New + + include sorter diff --git a/templates/sorter.jade b/templates/sorter.jade new file mode 100644 index 0000000..e7f91bd --- /dev/null +++ b/templates/sorter.jade @@ -0,0 +1 @@ +div.stuff-here=origin