From d2a0b617acea80690d26edb59c8eb4b4474a03df Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Fri, 21 Jul 2017 14:14:14 +0200
Subject: [PATCH] Moving a bit back towards current frontpage
---
.../scipost/assets/config/preconfig.scss | 9 +-
scipost/static/scipost/assets/css/_cards.scss | 2 +-
scipost/static/scipost/assets/css/_grid.scss | 4 +
.../static/scipost/assets/css/_homepage.scss | 89 +++++++
scipost/static/scipost/assets/css/_nav.scss | 2 +-
scipost/static/scipost/assets/css/style.scss | 1 +
scipost/templates/scipost/bare_base.html | 55 ++++
scipost/templates/scipost/base.html | 57 +---
.../templates/scipost/base_for_sidebar.html | 28 ++
scipost/templates/scipost/index.html | 244 +++++++++---------
10 files changed, 311 insertions(+), 180 deletions(-)
create mode 100644 scipost/static/scipost/assets/css/_homepage.scss
create mode 100644 scipost/templates/scipost/bare_base.html
create mode 100644 scipost/templates/scipost/base_for_sidebar.html
diff --git a/scipost/static/scipost/assets/config/preconfig.scss b/scipost/static/scipost/assets/config/preconfig.scss
index 9d286dcfa..25200bddb 100644
--- a/scipost/static/scipost/assets/config/preconfig.scss
+++ b/scipost/static/scipost/assets/config/preconfig.scss
@@ -12,9 +12,6 @@ $container-max-widths: (
lg: 1160px,
xl: 1200px
);
-.row {
- margin-bottom: 1rem;
-}
// Colors
//
@@ -22,7 +19,9 @@ $scipost-light: #C3D7EE;
$scipost-lightblue: #6884C2;
$scipost-darkblue: #002b49;
$scipost-orange: #FFA300;
+$scipost-white: #f9f9f9;
$green: #6ebb6e;
+$sidebar-border-color: #dfe0e4;
$blue: $scipost-lightblue !default;
$body-color: $scipost-darkblue !default;
@@ -37,11 +36,13 @@ $alert-border-radius: $border-radius-base;
// Cards
//
$card-spacer-x: 0.75rem;
-$card-border-radius: 1px;
+$card-border-radius: 3px;
$card-border-color: #fff;
$card-cap-bg: transparent;
$btn-secondary-border-color: #f1f1f1;
$card-shadow-color: #ccc;
+$card-grey-border-bottom-color: #d0d1d5;
+$card-grey-border-color: #e5e6e9 #dfe0e4 $card-grey-border-bottom-color;
// breadcrumb
//
diff --git a/scipost/static/scipost/assets/css/_cards.scss b/scipost/static/scipost/assets/css/_cards.scss
index 0f3dea9c6..3445743bc 100644
--- a/scipost/static/scipost/assets/css/_cards.scss
+++ b/scipost/static/scipost/assets/css/_cards.scss
@@ -3,7 +3,7 @@
&.card-grey {
background-color: #F4F4F4;
- border-color: #ececec;
+ border-color: $card-grey-border-color;
box-shadow: 0 1px 0 0 $card-shadow-color;
}
diff --git a/scipost/static/scipost/assets/css/_grid.scss b/scipost/static/scipost/assets/css/_grid.scss
index bf3dcdaa9..e7ef90aaf 100644
--- a/scipost/static/scipost/assets/css/_grid.scss
+++ b/scipost/static/scipost/assets/css/_grid.scss
@@ -3,6 +3,10 @@
min-height: 190px;
}
+.row {
+ margin-bottom: 1rem;
+}
+
.panel {
padding: 0.75rem;
height: 100%;
diff --git a/scipost/static/scipost/assets/css/_homepage.scss b/scipost/static/scipost/assets/css/_homepage.scss
new file mode 100644
index 000000000..ba4a8bb8e
--- /dev/null
+++ b/scipost/static/scipost/assets/css/_homepage.scss
@@ -0,0 +1,89 @@
+.has-sidebar {
+ .submenu {
+ margin-bottom: 0;
+ }
+
+ .content-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .container {
+ position: relative;
+ z-index: 2;
+ float: left;
+ width: calc(100% - 400px);
+ min-height: 100%;
+ }
+
+ .sidebar,
+ .main-panel {
+ padding-top: 1.5rem;
+ overflow: auto;
+ max-height: 100%;
+ height: 100%;
+ -webkit-overflow-scrolling: touch;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .main-panel {
+ position: relative;
+ z-index: 2;
+ float: left;
+ min-height: 100%;
+ }
+
+ .sidebar {
+ width: 100%;
+ border-top: 1px solid $card-grey-border-bottom-color;
+ background-size: cover;
+ background-position: center center;
+ background-color: $scipost-white;
+ border-left: 1px solid $sidebar-border-color;
+
+ .card {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ background: none;
+ border: 0;
+ margin-bottom: 0;
+ box-shadow: none;
+ border-radius: 0;
+ border-bottom: 1px solid $card-grey-border-bottom-color;
+ }
+ .card:last-child {
+ border-bottom: 0;
+ }
+
+ .card-header,
+ .card-block,
+ .card-footer {
+ border: 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+
+ @media (min-width: 768px) {
+ .main-panel {
+ width: calc(100% - 450px);
+ }
+ .sidebar {
+ width: 450px;
+ border-top: 0;
+ padding-bottom: 3rem;
+ box-shadow: 0px 1px 1px 0 #d0d1d5 inset;
+ }
+ }
+
+ @media (min-width: 1280px) {
+ .main-panel,
+ .sidebar {
+ padding-left: 3rem;
+ padding-right: 3rem;
+ }
+ }
+}
diff --git a/scipost/static/scipost/assets/css/_nav.scss b/scipost/static/scipost/assets/css/_nav.scss
index 9415bed1b..9f69a08b9 100644
--- a/scipost/static/scipost/assets/css/_nav.scss
+++ b/scipost/static/scipost/assets/css/_nav.scss
@@ -67,7 +67,7 @@ nav.submenu {
margin-top: -0.75rem;
margin-bottom: 1rem;
padding: 0.75rem 1rem;
- background-color: #f9f9f9;
+ background-color: $scipost-white;
border-radius: 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
diff --git a/scipost/static/scipost/assets/css/style.scss b/scipost/static/scipost/assets/css/style.scss
index 860452d8c..5d7150221 100644
--- a/scipost/static/scipost/assets/css/style.scss
+++ b/scipost/static/scipost/assets/css/style.scss
@@ -24,6 +24,7 @@
@import "code";
@import "form";
@import "grid";
+@import "homepage";
@import "labels";
@import "list_group";
@import "messages";
diff --git a/scipost/templates/scipost/bare_base.html b/scipost/templates/scipost/bare_base.html
new file mode 100644
index 000000000..418706259
--- /dev/null
+++ b/scipost/templates/scipost/bare_base.html
@@ -0,0 +1,55 @@
+{% load render_bundle from webpack_loader %}
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+
+ {% load staticfiles %}
+
+ <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700" rel="stylesheet">
+ <link rel="stylesheet" type="text/css" href="{% static 'scipost/SciPost.css' %}" />
+
+ {% render_bundle 'bootstrap' 'css' %}
+ {% render_bundle 'main' 'css' %}
+
+ <link rel="shortcut icon" href="{% static 'scipost/images/scipost_favicon.png' %}"/>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <title>SciPost{% block pagetitle %}{% endblock pagetitle %}</title>
+
+ <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+ <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+
+ {% block headsup %}
+ {% endblock headsup %}
+ </head>
+
+ <body class="{% block body_class %}{% endblock %}">
+ {% include 'scipost/header.html' %}
+ {% include 'scipost/navbar.html' %}
+ {% block breadcrumb %}{% endblock breadcrumb %}
+ {% block secondary_navbar %}{% endblock secondary_navbar %}
+ {% include 'scipost/messages.html' %}
+
+
+ {% block base %}{% endblock base %}
+
+ <script type="text/x-mathjax-config">
+ MathJax.Hub.Config({
+ tex2jax: {
+ inlineMath: [['$','$'], ['\\(','\\)']],
+ processEscapes: true
+ }});
+ </script>
+ <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+
+ {% render_bundle 'main' 'js' %}
+ {% render_bundle 'bootstrap' 'js' %}
+
+ {% block footer_script %}
+ {% endblock footer_script %}
+</body>
+
+</html>
diff --git a/scipost/templates/scipost/base.html b/scipost/templates/scipost/base.html
index 827cdc5f9..c223d7c9a 100644
--- a/scipost/templates/scipost/base.html
+++ b/scipost/templates/scipost/base.html
@@ -1,40 +1,7 @@
-{% load render_bundle from webpack_loader %}
+{% extends 'scipost/bare_base.html' %}
-<!DOCTYPE html>
-<html lang="en">
- <head>
-
- {% load staticfiles %}
-
- <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700" rel="stylesheet">
- <link rel="stylesheet" type="text/css" href="{% static 'scipost/SciPost.css' %}" />
-
- {% render_bundle 'bootstrap' 'css' %}
- {% render_bundle 'main' 'css' %}
-
- <link rel="shortcut icon" href="{% static 'scipost/images/scipost_favicon.png' %}"/>
-
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
- <title>SciPost{% block pagetitle %}{% endblock pagetitle %}</title>
-
- <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-
- {% block headsup %}
- {% endblock headsup %}
- </head>
-
- <body class="{% block body_class %}{% endblock %}">
- {% include 'scipost/header.html' %}
- {% include 'scipost/navbar.html' %}
- {% block breadcrumb %}{% endblock breadcrumb %}
- {% block secondary_navbar %}{% endblock secondary_navbar %}
- {% include 'scipost/messages.html' %}
-
-
- <div class="container">
+{% block base %}
+ <div class="{% block container_class %}container{% endblock %}">
{% block page_header %}{% endblock page_header %}
{% block content %}{% endblock content %}
@@ -49,20 +16,4 @@
{% include 'scipost/footer.html' %}
- <script type="text/x-mathjax-config">
- MathJax.Hub.Config({
- tex2jax: {
- inlineMath: [['$','$'], ['\\(','\\)']],
- processEscapes: true
- }});
- </script>
- <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-
- {% render_bundle 'main' 'js' %}
- {% render_bundle 'bootstrap' 'js' %}
-
- {% block footer_script %}
- {% endblock footer_script %}
-</body>
-
-</html>
+{% endblock base %}
diff --git a/scipost/templates/scipost/base_for_sidebar.html b/scipost/templates/scipost/base_for_sidebar.html
new file mode 100644
index 000000000..86d25e5ba
--- /dev/null
+++ b/scipost/templates/scipost/base_for_sidebar.html
@@ -0,0 +1,28 @@
+{% extends 'scipost/bare_base.html' %}
+
+{% block base %}
+ <div class="content-wrapper">
+ <div class="main-panel">
+ <div class="{% block container_class %}container-fluid{% endblock %}">
+ {% block page_header %}{% endblock page_header %}
+
+ {% block content %}{% endblock content %}
+
+ {% block content_footer %}{% endblock content_footer %}
+ </div>
+
+ {% block bodysup %}
+ {% endblock bodysup %}
+
+ {% block secondary_footer %}{% endblock secondary_footer %}
+
+ </div>
+
+ <div class="sidebar">
+ {% block sidebar %}{% endblock %}
+ </div>
+ </div>
+
+ {% include 'scipost/footer.html' %}
+
+{% endblock base %}
diff --git a/scipost/templates/scipost/index.html b/scipost/templates/scipost/index.html
index 259a446c8..e220a938d 100644
--- a/scipost/templates/scipost/index.html
+++ b/scipost/templates/scipost/index.html
@@ -1,7 +1,9 @@
-{% extends 'scipost/base.html' %}
+{% extends 'scipost/base_for_sidebar.html' %}
{% load staticfiles %}
+{% block body_class %}{{block.super}} has-sidebar has-breadcrumb-submenu homepage{% endblock %}
+
{% block breadcrumb %}
<nav class="submenu">
<span class="item">Go directly to Journal:</span>
@@ -12,137 +14,138 @@
{% endblock %}
{% block content %}
-<div class="row pt-2">
- <div class="col-md-7">
- <!-- Latest publications -->
- <div class="card card-grey">
- <div class="card-header">
- <h2 class="card-title mb-0"><a href="{% url 'journals:journals' %}" class="text-black">Latest Publications</a></h2>
- </div>
- <div class="card-block pt-0">
- <ul class="list-group list-group-flush">
- {% for publication in publications %}
- <li class="list-group-item">
- <div class="card-block px-0">
- {% include 'journals/_publication_details_small.html' with publication=publication %}
- </div>
- </li>
- {% endfor %}
- </ul>
- </div>
- </div><!-- End latest publications -->
-
- <!-- Latest submissions -->
- <div class="card card-grey mt-4">
- <div class="card-header">
- <h2 class="card-title mb-0"><a href="{% url 'submissions:submissions' %}" class="text-black">Latest Submissions</a></h2>
- </div>
- <div class="card-block pt-0">
- <ul class="list-group list-group-flush">
- {% for submission in submissions %}
- <li class="list-group-item">
- {% include 'submissions/_submission_card_content_sparse.html' with submission=submission %}
- </li>
- {% endfor %}
- </ul>
- </div>
- </div><!-- End latest submissions -->
- </div>
-
- <div class="col-md-5">
- <div class="pl-lg-5">
- {% if not user.is_authenticated %}
- <!-- Register -->
- <div class="card card-grey">
- <div class="card-block">
- <h2 class="card-title mb-0"><a href="{% url 'scipost:register' %}">Register</a></h2>
- <p class="m-0">Professional scientists (PhD students and above) can become Contributors to SciPost by filling the <a href="/register">registration form</a>.</p>
- </div>
- </div><!-- End Register -->
- {% endif %}
-
- <!-- News -->
+ <div class="row">
+ <div class="col-lg-6">
+ <!-- Latest publications -->
<div class="card card-grey">
- <div class="card-header border-0">
- <h2 class="card-title mb-0">
- News
- <a class="floating-rss-icon" href="{% url 'scipost:feeds' %}">
- <img src="{% static 'scipost/images/feed-icon-14x14.png' %}" alt="Feed logo" width="14">
- </a>
- </h2>
- <h4 class="card-subtitle pb-0 text-muted">Latest news and announcements.</h4>
+ <div class="card-header">
+ <h2 class="card-title mb-0"><a href="{% url 'journals:journals' %}" class="text-black">Latest Publications</a></h2>
</div>
- <div class="card-block">
- <ul class="list-group list-group-flush">
- {% if latest_newsitem %}
- <li class="list-group-item">
- {% include 'news/news_card_content_short.html' with news=latest_newsitem %}
- </li>
- {% else %}
- <li class="list-group-item">
- No current newsitems found.
- </li>
- {% endif %}
- </ul>
+ <div class="card-block pt-0">
+ <ul class="list-group list-group-flush">
+ {% for publication in publications %}
+ <li class="list-group-item">
+ <div class="card-block px-0">
+ {% include 'journals/_publication_details_small.html' with publication=publication %}
+ </div>
+ </li>
+ {% endfor %}
+ </ul>
</div>
- <div class="card-footer"><a href="{% url 'news:news' %}">More news</a></div>
- </div><!-- End news -->
+ </div><!-- End latest publications -->
+ </div>
- <!-- Latest issues -->
+ <div class="col-lg-6">
+ <!-- Latest submissions -->
<div class="card card-grey">
- <div class="card-header border-0 pb-0">
- <h2 class="card-title mb-0">Latest issues</h2>
+ <div class="card-header">
+ <h2 class="card-title mb-0"><a href="{% url 'submissions:submissions' %}" class="text-black">Latest Submissions</a></h2>
</div>
- <div class="card-block">
- <ul class="m-0 pl-4">
- {% for issue in issues %}
- <li>
- <a href="{{issue.get_absolute_url}}">{{issue}}</a>
- </li>
- {% endfor %}
- </ul>
+ <div class="card-block pt-0">
+ <ul class="list-group list-group-flush">
+ {% for submission in submissions %}
+ <li class="list-group-item">
+ {% include 'submissions/_submission_card_content_sparse.html' with submission=submission %}
+ </li>
+ {% endfor %}
+ </ul>
</div>
- <div class="card-footer">
- <a href="{% url 'journal:issues' 'SciPostPhys' %}">All issues</a>
- </div>
- </div><!-- End latest issues -->
-
- <!-- Summarized -->
- <div class="card card-grey">
- <div class="card-block">
- <h2 class="card-title">
- <a href="{% url 'journals:journals' %}">Journals</a>
- </h2>
- <h4 class="card-subtitle pt-0 mb-2 text-muted">SciPost publishes a portfolio of high-quality two-way open access scientific journals.</h4>
- <p>
- All SciPost Journals implement the stringent <a href="{% url 'scipost:FAQ' %}#pwr">peer-witnessed refereeing</a> principle.
- <br>
- All Journals are fully managed by professional scientists.
- </p>
- <p>
- <a href="{% url 'scipost:about' %}#editorial_college_physics">Editorial College (Physics)</a>
- <br>
- <a href="{% url 'submissions:sub_and_ref_procedure' %}">Submission and refereeing procedure</a>
- </p>
- <h2 class="card-title">
- <a href="{% url 'commentaries:commentaries' %}">Commentaries</a>
- </h2>
- <p>SciPost Commentaries allow Contributors to comment and build on all existing literature.</p>
- <h2 class="card-title">
- <a href="{% url 'theses:theses' %}">Theses</a>
- </h2>
- <p>SciPost Theses allow Contributors to find Master's, Ph.D. and Habilitation theses relevant to their work.</p>
- </div>
- </div><!-- End Summarized -->
+ </div><!-- End latest submissions -->
</div>
</div>
-</div>
+{% endblock %}
+
+{% block sidebar %}
+ {% if not user.is_authenticated %}
+ <!-- Register -->
+ <div class="card card-grey">
+ <div class="card-block">
+ <h2 class="card-title mb-0"><a href="{% url 'scipost:register' %}">Register</a></h2>
+ <p class="m-0">Professional scientists (PhD students and above) can become Contributors to SciPost by filling the <a href="/register">registration form</a>.</p>
+ </div>
+ </div><!-- End Register -->
+ {% endif %}
+
+ <!-- News -->
+ <div class="card card-grey">
+ <div class="card-header border-0">
+ <h2 class="card-title mb-0">
+ News
+ <a class="floating-rss-icon" href="{% url 'scipost:feeds' %}">
+ <img src="{% static 'scipost/images/feed-icon-14x14.png' %}" alt="Feed logo" width="14">
+ </a>
+ </h2>
+ <h4 class="card-subtitle pb-0 text-muted">Latest news and announcements.</h4>
+ </div>
+ <div class="card-block">
+ <ul class="list-group list-group-flush">
+ {% if latest_newsitem %}
+ <li class="list-group-item">
+ {% include 'news/news_card_content_short.html' with news=latest_newsitem %}
+ </li>
+ {% else %}
+ <li class="list-group-item">
+ No current newsitems found.
+ </li>
+ {% endif %}
+ </ul>
+ </div>
+ <div class="card-footer"><a href="{% url 'news:news' %}">More news</a></div>
+ </div><!-- End news -->
+ <!-- Latest issues -->
+ <div class="card card-grey">
+ <div class="card-header border-0 pb-0">
+ <h2 class="card-title mb-0">Latest issues</h2>
+ </div>
+ <div class="card-block">
+ <ul class="m-0 pl-4">
+ {% for issue in issues %}
+ <li>
+ <div class="py-1">
+ <a href="{{issue.get_absolute_url}}">{{issue.in_volume}} issue {{issue.number}}</a><br>
+ <span class="text-muted">{{issue.period_as_string}}</span>
+ </div>
+ </li>
+ {% endfor %}
+ </ul>
+ </div>
+ <div class="card-footer">
+ <a href="{% url 'journal:issues' 'SciPostPhys' %}">All issues</a>
+ </div>
+ </div><!-- End latest issues -->
+
+ <!-- Summarized -->
+ <div class="card card-grey">
+ <div class="card-block">
+ <h2 class="card-title">
+ <a href="{% url 'journals:journals' %}">Journals</a>
+ </h2>
+ <h4 class="card-subtitle pt-0 mb-2 text-muted">SciPost publishes a portfolio of high-quality two-way open access scientific journals.</h4>
+ <p>
+ All SciPost Journals implement the stringent <a href="{% url 'scipost:FAQ' %}#pwr">peer-witnessed refereeing</a> principle.
+ <br>
+ All Journals are fully managed by professional scientists.
+ </p>
+ <p>
+ <a href="{% url 'scipost:about' %}#editorial_college_physics">Editorial College (Physics)</a>
+ <br>
+ <a href="{% url 'submissions:sub_and_ref_procedure' %}">Submission and refereeing procedure</a>
+ </p>
+ <h2 class="card-title">
+ <a href="{% url 'commentaries:commentaries' %}">Commentaries</a>
+ </h2>
+ <p>SciPost Commentaries allow Contributors to comment and build on all existing literature.</p>
+ <h2 class="card-title">
+ <a href="{% url 'theses:theses' %}">Theses</a>
+ </h2>
+ <p>SciPost Theses allow Contributors to find Master's, Ph.D. and Habilitation theses relevant to their work.</p>
+ </div>
+ </div><!-- End Summarized -->
{% endblock %}
{% block secondary_footer %}
-<footer class="secondary pt-3">
- <div class="container text-left">
+ <footer class="container-fluid text-left secondary pt-4 mt-5">
<div class="row">
<div class="col-md-6">
<h1>SciPost is endorsed by</h1>
@@ -164,6 +167,5 @@
<a href="//www.crossref.org" target="_blank"><img src="//assets.crossref.org/logo/crossref-logo-200.svg" width="100" alt="Crossref logo"></a>
</div>
</div>
- </div>
-</footer>
+ </footer>
{% endblock %}
--
GitLab