Skip to content

Commit

Permalink
Redesigns daily page.
Browse files Browse the repository at this point in the history
  • Loading branch information
kalvn committed Nov 3, 2017
1 parent 17dd870 commit a5d044b
Show file tree
Hide file tree
Showing 16 changed files with 362 additions and 201 deletions.
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"moment": ">=2.9.0",
"blazy": ">=1.3.0",
"Sortable": "~1.4.2",
"awesomplete": "^1.1.1"
"awesomplete": "^1.1.1",
"salvattore": "^1.0.9"
}
}
3 changes: 2 additions & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ var JS_LIB = [
ROOT + 'lib/awesomplete/awesomplete.min.js',
ROOT + 'lib/blazy/blazy.min.js',
ROOT + 'lib/moment/min/moment.min.js',
ROOT + 'lib/Sortable/Sortable.min.js'
ROOT + 'lib/Sortable/Sortable.min.js',
ROOT + 'lib/salvattore/dist/salvattore.min.js'
];

var BOOTSTRAP_FONTS = ROOT + 'lib/bootstrap/dist/fonts/*';
Expand Down
13 changes: 7 additions & 6 deletions material/build/scripts.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion material/build/styles.min.css

Large diffs are not rendered by default.

104 changes: 60 additions & 44 deletions material/daily.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,70 +9,86 @@
{$value}
{/loop}
</div>
<div class="dailyAbout">
All links of one day<br>in a single page.<br>
{if="$previousday"} <a href="?do=daily&amp;day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
-
{if="$nextday"}<a href="?do=daily&amp;day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
<br><br>
<a href="?do=dailyrss" title="1 RSS entry per day"><img src="images/feed-icon-14x14.png#" alt="rss_feed">Daily RSS Feed</a>

<div class="daily-header">
<h1>The Daily Shaarli</h1>
<p class="daily-header-subtitle">All links of one day in a single page</p>
<div class="container">
<div class="row">
<div class="col-xs-6">
{if="$previousday"}
<a href="?do=daily&amp;day={$previousday}" class="button">
<i class="mdi mdi-arrow-left"></i> Previous day
</a>
{else}
<i class="mdi mdi-arrow-left"></i> Previous day
{/if}
</div>
<div class="col-xs-6">
<a {if="$nextday"}href="?do=daily&amp;day={$nextday}"{else}href="#"{/if} class="button" {if="!$nextday"}disabled{/if}>
Next day <i class="mdi mdi-arrow-right"></i>
</a>
</div>
</div>

<hr class="darker">
</div>
</div>
<div class="dailyTitle"><img src="images/floral_left.png" width="51" height="50" class="nomobile" alt="floral_left"> The Daily Shaarli <img src="images/floral_right.png" width="51" height="50" class="nomobile" alt="floral_right"></div>
<div class="dailyDate"><span class="nomobile">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</span> {function="strftime('%A %e %B %Y', $day)"} <span class="nomobile">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</span></div>
<div class="clear"></div>

<h2 class="daily-title">{function="format_date($dayDate, false)"}</h2>
{if="$linksToDisplay"}
<div class="clearfix">
{loop="$cols"}
{if="isset($value[0])"}
<div id="daily_col{$counter+1}">
{loop="$value"}
{$link=$value}
<div class="dailyEntry">
<div class="dailyEntryPermalink">
<a href="?{$value.shorturl}">
<img src="images/squiggle2.png" width="25" height="26" title="permalink" alt="permalink">
</a>
</div>
<div class="daily-grid clearfix" data-columns>
{loop="$linksToDisplay"}
{$link=$value}
<div class="daily-item">
<div class="daily-card">
<a href="{$link.real_url}" class="daily-item-header ripple ripple-primary">
{$link.title}
</a>
{ignore}
{$thumb=thumbnail($value.url)}
{if="$thumb != false"}
<!-- <div class="daily-item-image">
{$thumb}
</div> -->
{/if}
{/ignore}
{if="$link.formatedDescription"}
<div class="daily-item-body">
{$link.formatedDescription}
</div>
{/if}
<div class="daily-item-footer clearfix">
{if="!$hide_timestamps || isLoggedIn()"}
<div class="dailyEntryLinkdate">
<a href="?{$value.shorturl}">{function="strftime('%H:%M', $link.timestamp)"}</a>
</div>
<a href="?{$link.shorturl}" class="daily-item-footer-subtitle" title="Permalink">
{function="strftime('%H:%M', $link.timestamp)"}
</a>
{/if}
{if="$link.tags"}
<div class="dailyEntryTags">
{loop="$link.taglist"}
{$value} -
{/loop}
</div>
{/if}
<div class="dailyEntryTitle">
<a href="{$link.real_url}">{$link.title}</a>
<div class="daily-item-tags">
{$tags=implode(', ', $link['taglist'])}
{$tags}
</div>
{if="$link.thumbnail"}
<div class="dailyEntryThumbnail">{$link.thumbnail}</div>
{/if}
<div class="dailyEntryDescription">{$link.formatedDescription}</div>
<div class="dailyEntryFooter">
{loop="$link.link_plugin"}
{$value}
{/loop}
<div>
{loop="$link.link_plugin"}
{$value}
{/loop}
</div>
</div>
{/loop}
</div>
</div>
{/if}
{/loop}
</div>
{else}
<div class="dailyNoEntry">No articles on this day.</div>
<div>No articles on this day.</div>
{/if}

<div id="plugin_zone_end_picwall" class="plugin_zone">
{loop="$plugin_end_zone"}
{$value}
{/loop}
</div>
<div id="closing"><img src="images/squiggle_closing.png" width="66" height="61" alt="-"></div>
</div>
{include="page.footer"}
</body>
Expand Down
5 changes: 2 additions & 3 deletions material/dailyrss.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<!--{$dateFormat = isset($config->get('config.MATERIAL_PHP_DATE_PATTERN') ? $config->get('config.MATERIAL_PHP_DATE_PATTERN') : '%c'}-->
<item>
<title>{$title} - {function="strftime('%A %e %B %Y', $daydate)"}</title>
<guid>{$absurl}</guid>
<link>{$absurl}</link>
<pubDate>{$rssdate}</pubDate>
<description><![CDATA[
{loop="$links"}
{loop="links"}
<h3><a href="{$value.url}">{$value.title}</a></h3>
<small>{if="!$hide_timestamps"}{function="strftime($dateFormat, $value.timestamp)"} - {/if}{if="$value.tags"}{$value.tags}{/if}<br>
<small>{if="!$hide_timestamps"}{function="strftime('%c', $value.timestamp)"} - {/if}{if="$value.tags"}{$value.tags}{/if}<br>
{$value.url}</small><br>
{if="$value.thumbnail"}{$value.thumbnail}{/if}<br>
{if="$value.description"}{$value.formatedDescription}{/if}
Expand Down
32 changes: 15 additions & 17 deletions material/page.header.html
Original file line number Diff line number Diff line change
Expand Up @@ -85,25 +85,23 @@
<i class="mdi mdi-key"></i>
</a>
{/if}

{if="$showatom"}
<div class="toolbar-button-container">
<button type="button" class="icon-header popup-trigger ripple" data-popup="popup-rss" title="RSS Feeds">
<i class="mdi mdi-rss"></i>
</button>
<div id="popup-rss" class="popup popup-rss hidden">
<div class="popup-title">RSS feeds</div>
<div class="popup-body">
<ul>
<li><a href="{$feedurl}?do=rss{$searchcrits}" class="ripple">RSS Feed</a></li>
<li><a href="{$feedurl}?do=atom{$searchcrits}" class="ripple">ATOM Feed</a></li>
</ul>
</div>
<div class="toolbar-button-container">
<button type="button" class="icon-header popup-trigger ripple" data-popup="popup-rss" title="RSS Feeds">
<i class="mdi mdi-rss"></i>
</button>
<div id="popup-rss" class="popup popup-rss hidden">
<div class="popup-title">RSS feeds</div>
<div class="popup-body">
<ul>
<li><a href="{$feedurl}?do=rss{$searchcrits}" class="ripple">RSS Feed</a></li>
{if="$showatom"}
<li><a href="{$feedurl}?do=atom{$searchcrits}" class="ripple">ATOM Feed</a></li>
{/if}
<li><a href="{$feedurl}?do=dailyrss" class="ripple" title="1 RSS entry per day">Daily Feed</a></li>
</ul>
</div>
</div>
{else}
<a href="{$feedurl}?do=rss{$searchcrits}" class="icon-rss ripple" title="RSS Feed"></a>
{/if}
</div>
{if="isLoggedIn()"}
<div class="toolbar-button-container">
<button type="button" class="icon-header ripple batch-trigger" title="Select multiple links for deletion">
Expand Down
2 changes: 1 addition & 1 deletion material/scss/components/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -236,4 +236,4 @@ $button-height: 36px;
color: #dd4f43;
}
}
}
}
9 changes: 9 additions & 0 deletions material/scss/components/_fonts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,13 @@
url('../static/fonts/material-icons/materialdesignicons-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Old Newspaper Types';
src: url('../static/fonts/oldnewspapertypes/oldnewspapertypes-webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('../static/fonts/oldnewspapertypes/oldnewspapertypes-webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('../static/fonts/oldnewspapertypes/oldnewspapertypes-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
3 changes: 3 additions & 0 deletions material/scss/components/_icons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,7 @@
}
.mdi-checkbox-marked-outline:before{
content: "\f135";
}
.mdi-link:before {
content: "\F337";
}
133 changes: 133 additions & 0 deletions material/scss/components/_page-daily.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
.daily-grid[data-columns]:before{
content: '4 .column.size-1of4';

@media screen and (max-width: 1200px) {
content: '2 .column.size-1of2'
}

@media screen and (max-width: 768px) {
content: '1 .column.size-1of1'
}
}

.column {
float: left;
padding: 0 $space-m;
}

.size-1of4 {
width: 25%;
}
.size-1of2 {
width: 50%;
}
.size-1of1 {
width: 100%;
}

.daily-header{
text-align: center;

h1{
font-family: 'Old Newspaper Types', serif;
font-size: 4rem;
}
}

.daily-header-subtitle{
color: #999;
}

.daily-title{
margin: $space-l 0 $space-xl 0;
text-align: center;
font-family: 'Old Newspaper Types', serif;
font-size: 1.6rem;
}

.daily-item{
position: relative;

&:hover .daily-item-plus{
display: block;
}

a{
color: auto;

&:hover{
text-decoration: none;
}
}
}

.daily-card{
@extend .shadow-1;
display: block;
margin-bottom: $space-l;
color: inherit;
border-radius: $radius-s;
outline: 3px solid transparent;
transition: all $animation-speed ease;

&:hover,
&:focus{
@extend .shadow-2;
}
}

.daily-item-header{
display: block;
background-color: #f8f9fa;
padding: $space-s;
color: #678;
border-radius: $radius-s $radius-s 0 0;
transition: background-color $animation-speed ease;

&:hover,
&:focus{
color: #678;
text-decoration: none;
background-color: darken(#f8f9fa, 3%);
}
}

.daily-item-image{
widows: 100%;
height: 100px;
background-size: cover;
}

.daily-item-body{
background-color: #fff;
padding: $space-m;
}

.daily-item-footer{
background-color: #f8f9fa;
padding: $space-s;
font-size: 80%;
color: #678;
border-top: solid 1px rgba(102,119,136,0.05);
border-radius: 0 0 $radius-s $radius-s;
}

.daily-item-footer-subtitle{
display: block;
float: left;
color: #ccc;

&:hover{
color: #678;

&:after{
@extend .mdi;
content: "\F337";
animation: slide-from-right $animation-speed ease;
}
}
}

.daily-item-tags{
text-align: right;
}
Loading

0 comments on commit a5d044b

Please sign in to comment.