nfp/nfp_sites
1
0
Fork 0
Code Issues Pull requests Projects Releases 53 Wiki Activity Actions

More UI tweaks and fixes

Browse source
This commit is contained in:
Jonatan Nilsson 2019-10-02 21:48:50 +00:00
parent 4c29079217
commit d2539e0b9e
12 changed files with 137 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
api/serveindex.mjs
View file

@ -110,11 +110,12 @@ export async function serveIndex(ctx, path) {
}
if (path === '/') {
data = await Article.getFrontpageArticles(Number(ctx.query.page || '1'))
let currPage = Number(ctx.query.page || '1')
data = await Article.getFrontpageArticles(currPage)
if (data.pagination.rowCount > 10) {
links = {
current: { title: 'Page 1' },
current: { title: 'Page ' + currPage },
next: { page: 2, title: 'Next' },
last: { page: Math.ceil(data.pagination.rowCount / 10), title: 'Last' },
}
@ -123,6 +124,10 @@ export async function serveIndex(ctx, path) {
current: { title: 'Page 1' },
}
}
if (currPage > 1) {
links.previous = { page: currPage - 1, title: 'Previous' }
links.first = { page: 1, title: 'First' }
}
data = data.toJSON().map(mapArticle.bind(null, true))
} else if (path.startsWith('/article/') || path.startsWith('/page/')) {
let id = path.split('/')[2]

3
app/_common.scss
View file

@ -47,13 +47,14 @@ $dark_secondary-light-bg: #ffad42;
$dark_secondary-light-fg: black;
$dark_secondary-dark-bg: #e05e00;
$dark_secondary-dark-fg: white;
$dark_secondary-darker-fg: #fe791b;
$dark_table-fg: #333;
$dark_border: #343536;
$dark_border-fg: #d7dadc;;
$dark_border-fg-url: #e05e00;
$dark_title-fg: #808080;
$dark_meta-fg: #d7dadc;
$dark_meta-fg: hsl(0, 0%, 55%);
$dark_meta-light-fg: #999999;
$dark_main-bg: black;

6
app/article/article.js
View file

@ -7,7 +7,6 @@ const Article = {
oninit: function(vnode) {
this.error = ''
this.lastarticle = m.route.param('article') || '1'
this.loadingnews = false
this.showcomments = false
if (window.__nfpdata) {
@ -46,7 +45,7 @@ const Article = {
vnode.state.error = err.message
})
.then(function() {
vnode.state.loading = vnode.state.loadingnews = false
vnode.state.loading = false
m.redraw()
})
},
@ -54,6 +53,7 @@ const Article = {
onupdate: function(vnode) {
if (this.path !== m.route.param('id')) {
this.fetchArticle(vnode)
m.redraw()
}
},
@ -73,7 +73,7 @@ const Article = {
return (
this.loading ?
m('div.loading-spinner')
m('article.article', m('div.loading-spinner'))
: m('article.article', [
this.article.parent ? m('div.goback', ['« ', m(m.route.Link, { href: '/page/' + this.article.parent.path }, this.article.parent.name)]) : null,
m('header', m('h1', this.article.name)),

23
app/article/article.scss
View file

@ -16,6 +16,12 @@ article.article {
}
}
.loading-spinner {
position: relative;
flex-grow: 2;
height: 300px;
}
.cover {
margin: 0 0 20px;
}
@ -103,6 +109,16 @@ article.article {
}
}
@media screen and (max-width: 639px){
article.article {
.fr-view {
margin: 0;
width: 100%;
border: none !important;
}
}
}
.darkmodeon {
article.article {
header {
@ -124,5 +140,12 @@ article.article {
.goback a {
color: $dark_secondary-dark-bg;
}
.entrymeta {
color: $dark_meta-fg;
a {
color: $dark_secondary-dark-bg;
}
}
}
}

2
app/footer/footer.scss
View file

@ -75,7 +75,7 @@ footer {
.sitemap {
a {
color: $dark_border-fg-url;
color: $dark_secondary-darker-fg;
}
}
}

1
app/frontpage/frontpage.js
View file

@ -38,6 +38,7 @@ const Frontpage = {
onupdate: function(vnode) {
if (this.lastpage !== (m.route.param('page') || '1')) {
this.fetchArticles(vnode)
m.redraw()
}
},

18
app/frontpage/frontpage.scss
View file

@ -28,6 +28,7 @@ frontpage {
.frontpage-news {
display: flex;
flex-direction: column;
flex-grow: 2;
}
aside.sidebar {
@ -61,27 +62,24 @@ frontpage {
padding-left: 10px;
list-style-type: disc;
list-style-position: inside;
a {
display: inline-block;
padding: 0;
max-width: 206px;
}
}
}
a {
padding: 5px 5px 0px;
padding: 2px 5px;
display: block;
text-decoration: none;
color: $secondary-dark-bg;
font-size: 14px;
font-weight: bold;
display: inline-block;
max-width: 200px;
}
}
.loading-spinner {
height: 100px;
position: relative;
}
newsitem {
@ -104,8 +102,8 @@ frontpage {
width: 200px;
flex: 0 0 200px;
ul li a {
max-width: 156px;
a {
max-width: 150px;
}
}
}
@ -123,7 +121,7 @@ frontpage {
border-bottom: 1px solid $border;
order: 2;
ul li a {
a {
max-width: unset;
}
}

2
app/menu/menu.scss
View file

@ -8,7 +8,7 @@
background: $primary-dark-bg;
color: $primary-dark-fg;
padding: 0 10px 0 0;
height: 100px;
min-height: 100px;
display: flex;
button.dark {

5
app/pages/page.js
View file

@ -36,6 +36,7 @@ const Page = {
media: null,
}
this.loading = true
this.loadingnews = true
ApiPage.getPage(this.path)
.then(function(result) {
@ -53,8 +54,10 @@ const Page = {
onupdate: function(vnode) {
if (this.path !== m.route.param('id')) {
this.fetchPage(vnode)
m.redraw()
} else if (m.route.param('page') && m.route.param('page') !== this.lastpage) {
this.fetchArticles(vnode)
m.redraw()
}
},
@ -109,7 +112,7 @@ const Page = {
return (
this.loading ?
m('div.loading-spinner')
m('article.page', m('div.loading-spinner'))
: m('article.page', [
bannerPath ? m('.div.page-banner', { style: { 'background-image': 'url("' + bannerPath + '")' } } ) : null,
this.page.parent

57
app/pages/page.scss
View file

@ -15,6 +15,12 @@ article.page {
}
}
.loading-spinner {
position: relative;
flex-grow: 2;
height: 300px;
}
.page-banner {
background-size: cover;
background-repeat: no-repeat;
@ -56,12 +62,6 @@ article.page {
margin-bottom: 20px;
}
& > .loading-spinner {
width: 240px;
height: 50px;
position: relative;
}
aside.sidebar,
aside.news {
h4 {
@ -179,20 +179,25 @@ aside.news {
}
@media screen and (max-width: 639px){
article.page .container {
flex-direction: column !important;
}
article.page {
padding: 0;
article.page aside.sidebar {
width: calc(100% - 80px);
flex: 0 0 auto;
margin: 0px 30px 30px;
border-bottom: 1px solid $border;
padding: 0 0 5px;
}
.container {
flex-direction: column !important;
border: none !important;
}
article.page .news.single .page-cover {
margin: 0 0 20px;
aside.sidebar {
width: calc(100% - 80px);
flex: 0 0 auto;
margin: 0px 30px 30px;
border-bottom: 1px solid $border;
padding: 0 0 5px;
}
.news.single .page-cover {
margin: 0 0 20px;
}
}
}
@ -214,6 +219,18 @@ aside.news {
}
}
@media screen and (max-width: 480px){
article.page aside.sidebar a {
padding: 9px 10px;
}
}
@media (pointer:coarse) {
article.page aside.sidebar a {
padding: 9px 10px;
}
}
.darkmodeon {
article.page {
header {
@ -238,6 +255,10 @@ aside.news {
color: $dark_secondary-dark-bg;
}
}
.goback a {
color: $dark_secondary-dark-bg;
}
}
aside.news {

36
app/widgets/common.scss
View file

@ -58,7 +58,8 @@ newsentry {
fileinfo {
padding: 0 5px;
margin-bottom: 5px;
display: block;
display: flex;
flex-direction: column;
&.slim {
padding: 0;
@ -101,6 +102,22 @@ fileinfo {
}
}
@media screen and (max-width: 480px){
fileinfo,
fileinfo.slim {
padding: 8px 5px;
justify-content: center;
}
}
@media (pointer:coarse) {
fileinfo,
fileinfo.slim {
padding: 8px 5px;
justify-content: center;
}
}
newsitem {
display: flex;
flex-direction: column;
@ -229,6 +246,23 @@ pages {
}
}
@media screen and (max-width: 440px){
newsentry {
flex-direction: column;
align-items: center;
a.cover {
margin: 0 0 15px;
width: 100%;
img {
max-height: unset;
width: 100%;
}
}
}
}
.darkmodeon {
newsentry {
color: $dark_meta-fg;

15
app/widgets/newsentry.js
View file

@ -12,11 +12,22 @@ const Newsentry = {
},
view: function(vnode) {
var deviceWidth = window.innerWidth
var pixelRatio = window.devicePixelRatio || 1
var imagePath = ''
if (vnode.attrs.media) {
if (deviceWidth > 440 || pixelRatio <= 1) {
imagePath = vnode.attrs.media.small_url
} else {
imagePath = vnode.attrs.media.medium_url
}
}
return m('newsentry', [
vnode.attrs.media
imagePath
? m('a.cover', {
href: '/article/' + vnode.attrs.path,
}, m('img', { src: vnode.attrs.media.small_url, alt: 'Article image for ' + vnode.attrs.name }))
}, m('img', { src: imagePath, alt: 'Article image for ' + vnode.attrs.name }))
: m('a.cover.nobg'),
m('div.entrycontent', [
m('div.title', [