Section page styles

ubyssey · Apr 15, 2018 · a947433 · a947433
1 parent 2dc8447
commit a947433
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 66 deletions.
diff --git a/phoenix/static/src/js/index.js b/phoenix/static/src/js/index.js
@@ -13,13 +13,20 @@ $(function() {
   $(window).scroll(() => {
     const scrollTop = $(window).scrollTop();
     stickyElements.map(element => {
-      const elementOffset = element.data('offset');
-      const elementHeight = element.height();
-      const parentOffset = element.parent().offset().top;
-      const parentHeight = element.parent().height();
-      const hasClass = element.hasClass('js-sticky--fixed');
-      const shouldStick = parentOffset - scrollTop < elementOffset;
-      const shouldFreeze = scrollTop + elementOffset + elementHeight >= parentOffset + parentHeight;
+      const
+        elementOffset = element.data('offset'),
+        elementHeight = element.height(),
+        parentOffset = element.parent().offset().top,
+        parentHeight = element.parent().height();
+
+      if (parentHeight <= elementHeight) {
+        return;
+      }
+
+      const
+        hasClass = element.hasClass('js-sticky--fixed'),
+        shouldStick = parentOffset - scrollTop < elementOffset,
+        shouldFreeze = scrollTop + elementOffset + elementHeight >= parentOffset + parentHeight;
 
       if (shouldFreeze) {
         element.removeClass('js-sticky--fixed');

diff --git a/phoenix/static/src/styles/components/_article.scss b/phoenix/static/src/styles/components/_article.scss
@@ -123,6 +123,37 @@
   }
 }
 
+.c-article--5 {
+  .c-article__image-container {
+    // Structure
+    margin-bottom: 1rem;
+  }
+}
+
+.c-article--6 {
+  // Structure
+  display: flex;
+
+  .c-article__image-container {
+    // Structure
+    flex: 3;
+    padding-right: 2rem;
+  }
+
+  .c-article__info {
+    // Structure
+    flex: 2;
+    display: flex;
+    align-items: center;
+    padding-bottom: 5rem;
+  }
+
+  .c-article__headline {
+    // Text
+    font-size: 32px;
+  }
+}
+
 .c-article--page {
   .c-article__info {
     // Structure
@@ -193,6 +224,7 @@
       // Structure
       position: relative;
       width: 300px;
+      margin-bottom: 2rem;
     }
   }
 
@@ -201,6 +233,7 @@
       // Structure
       flex: 1;
       padding-right: 4rem;
+      margin-bottom: 2rem;
     }
 
     > *:first-child {

diff --git a/phoenix/static/src/styles/components/_article_banner.scss b/phoenix/static/src/styles/components/_article_banner.scss
@@ -1,8 +1,3 @@
-.c-article-banner {
-  // Structure
-  padding-bottom: 2rem;
-}
-
 .c-article-banner__image__container {
   // Structure
   height: 380px;

diff --git a/phoenix/static/src/styles/components/_articles-list.scss b/phoenix/static/src/styles/components/_articles-list.scss
@@ -0,0 +1,29 @@
+.c-articles-list {
+  // Structure
+  .c-article {
+    // Structure
+    margin-bottom: 1rem;
+  }
+
+  @media only screen and (min-width: $bp-mobile) {
+    // Structure
+    display: flex;
+
+    .c-article {
+      // Structure
+      flex: 1;
+      padding-left: 1rem;
+      padding-right: 1rem;
+
+      &:first-child {
+        // Structure
+        padding-left: 0;
+      }
+
+      &:last-child {
+        // Structure
+        padding-right: 0;
+      }
+    }
+  }
+}
diff --git a/phoenix/static/src/styles/components/_related_articles.scss b/phoenix/static/src/styles/components/_related_articles.scss
@@ -16,33 +16,3 @@
   color: #272525;
   letter-spacing: -0.35px;
 }
-
-.c-related-articles__list {
-  // Structure
-  .c-article {
-    // Structure
-    margin-bottom: 1rem;
-  }
-
-  @media only screen and (min-width: $bp-mobile) {
-    // Structure
-    display: flex;
-
-    .c-article {
-      // Structure
-      flex: 1;
-      padding-left: 1rem;
-      padding-right: 1rem;
-
-      &:first-child {
-        // Structure
-        padding-left: 0;
-      }
-
-      &:last-child {
-        // Structure
-        padding-right: 0;
-      }
-    }
-  }
-}
diff --git a/phoenix/static/src/styles/components/_section.scss b/phoenix/static/src/styles/components/_section.scss
@@ -0,0 +1,85 @@
+.c-section__title {
+  // Structure
+  margin-bottom: 1rem;
+
+  // Text
+  font-size: 36px;
+  text-align: center;
+}
+
+.c-section__topics {
+  // Border
+  border-top: 1px solid #EFEFEF;
+  border-bottom: 1px solid #EFEFEF;
+
+  ul {
+    // Structure
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    // Text
+    text-align: center;
+  }
+}
+
+.c-section__topics__item {
+  // Structure
+  display: inline-block;
+  height: 4rem;
+  margin-left: 0.8rem;
+  margin-right: 0.8rem;
+  position: relative;
+
+  // Text
+  color: #ed1d24;
+  font-size: 16px;
+  font-weight: 600;
+
+  &:not(:last-child):after {
+    content: '\B7';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 4rem;
+    line-height: 4rem;
+    right: -1rem;
+    width: 0.2rem;
+    text-align: center;
+  }
+
+  a {
+    display: block;
+    line-height: 4rem;
+  }
+}
+
+.c-section__primary {
+  // Structure
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.c-section__archive {
+  ul {
+    // Structure
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      margin-bottom: 1.5rem;
+    }
+  }
+}
+
+.c-section__archive__title {
+  // Structure
+  padding-bottom: 1rem;
+
+  // Text
+  font-size: 24px;
+
+  // Border
+  border-bottom: 1px solid #EFEFEF;
+}
diff --git a/phoenix/templates/components/article-6.html b/phoenix/templates/components/article-6.html
@@ -8,12 +8,14 @@
     </a>
   </div>
   <div class="c-article__info">
-    {% if article.topic %}
-    <a class="c-article__tag">{{ article.topic.name }}</a>
-    {% else %}
-    <a class="c-article__tag">{{ article.section.name }}</a>
-    {% endif %}
-    <h2 class="c-article__headline"><a href="{% article_url article %}">{{ article.headline }}</a></h2>
-    <span class="c-article__meta">By {{ article.get_author_string }}&nbsp;&nbsp;&middot;&nbsp;&nbsp;{{ article.published_at|date:"F d, Y P" }}</span>
+    <div>
+      {% if article.topic %}
+      <a class="c-article__tag">{{ article.topic.name }}</a>
+      {% else %}
+      <a class="c-article__tag">{{ article.section.name }}</a>
+      {% endif %}
+      <h2 class="c-article__headline"><a href="{% article_url article %}">{{ article.headline }}</a></h2>
+      <span class="c-article__meta">By {{ article.get_author_string }}&nbsp;&nbsp;&middot;&nbsp;&nbsp;{{ article.published_at|date:"F d, Y P" }}</span>
+    </div>
   </div>
 </article>
diff --git a/phoenix/templates/components/related-articles.html b/phoenix/templates/components/related-articles.html
@@ -1,6 +1,6 @@
 <div class="c-related-articles">
   <h3 class="c-related-articles__title">More {{ title }}</h3>
-  <div class="c-related-articles__list">
+  <div class="c-articles-list">
   {% for article in articles %}
     {% include 'components/article-5.html' with article=article %}
   {% endfor %}

diff --git a/phoenix/templates/page.html b/phoenix/templates/page.html
@@ -1 +1,33 @@
-page coming soon!
+{% extends 'base.html' %}
+
+{% block body %}
+
+{% include 'components/small-header.html' %}
+
+{% include 'components/advertisement-leaderboard.html' %}
+
+<div class="c-container">
+  <article class="c-article c-article--page">
+    <div class="c-article__info">
+      <h2 class="c-article__headline">{{ page.title }}</h2>
+      <div class="c-article__social">
+        <a class="c-article__social__icon"><i class="fab fa-facebook"></i></a>
+        <a class="c-article__social__icon"><i class="fab fa-twitter"></i></a>
+      </div>
+    </div>
+    <div class="c-article__main">
+      <div class="c-article__content">
+        {{ page.html }}
+      </div>
+      <div class="c-article__sidebar">
+        <div class="js-sticky" data-offset="80">
+          {% include 'components/advertisement-skyscraper.html' %}
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+
+{% include 'components/footer.html' %}
+
+{% endblock %}
diff --git a/phoenix/templates/section.html b/phoenix/templates/section.html
@@ -4,23 +4,22 @@
 
 {% include 'components/small-header.html' %}
 
-{% include 'components/advertisement-leaderboard.html' %}
-
 <div class="c-section c-container">
   <h1 class="c-section__title">{{ section.name }}</h1>
   <nav class="c-section__topics">
     <ul>
-      <li class="c-section__topics__item">Lifestyle</li>
-      <li class="c-section__topics__item">Elections</li>
-      <li class="c-section__topics__item">Topic 2</li>
-      <li class="c-section__topics__item">Topic topic</li>
-      <li class="c-section__topics__item">New topic test</li>
+      <li class="c-section__topics__item"><a>Lifestyle</a></li>
+      <li class="c-section__topics__item"><a>Elections</a></li>
+      <li class="c-section__topics__item"><a>Topic 2</a></li>
+      <li class="c-section__topics__item"><a>Topic topic</a></li>
+      <li class="c-section__topics__item"><a>New topic test</a></li>
     </ul>
   </nav>
+  {% include 'components/advertisement-leaderboard.html' %}
   <div class="c-section__primary">
     {% include 'components/article-6.html' with article=articles.primary %}
   </div>
-  <div class="c-section__secondary">
+  <div class="c-section__secondary c-articles-list">
     {% for article in articles.secondary %}
       {% include 'components/article-5.html' with article=article %}
     {% endfor %}
@@ -29,7 +28,7 @@ <h1 class="c-section__title">{{ section.name }}</h1>
     <h2 class="c-section__archive__title">Archive</h2>
     <ul>
       {% for article in articles.archive %}
-        {% include 'components/article-4.html' with article=article %}
+        <li>{% include 'components/article-4.html' with article=article %}</li>
       {% endfor %}
     </ul>
   </div>

diff --git a/phoenix/views.py b/phoenix/views.py
@@ -4,7 +4,7 @@
 from django.http import Http404
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
-from dispatch.models import Article, Section, Topic, Issue
+from dispatch.models import Article, Page, Section, Topic, Issue
 
 def homepage(request):
     news =  Article.objects.filter(section__slug='news', is_published=True).order_by('-published_at')
@@ -35,7 +35,6 @@ def section_topic(request, slug=None, topic=None):
     return section(request, slug, topic)
 
 def section(request, section_slug=None, topic_slug=None):
-
     try:
         section = Section.objects.get(slug=section_slug)
     except Section.DoesNotExist:
@@ -55,7 +54,7 @@ def section(request, section_slug=None, topic_slug=None):
     else:
         topic = None
 
-    paginator = Paginator(articles[4:], 15)
+    paginator = Paginator(articles[4:], 10)
     page = request.GET.get('page')
 
     try:
@@ -103,7 +102,16 @@ def article(request, year=0, month=0, slug=None):
     return render(request, 'article.html', context)
 
 def page(request, slug=None):
-    context = {}
+    try:
+        page = Page.objects.get(slug=slug, is_published=True)
+    except Page.DoesNotExist:
+        raise Http404("Page does not exist")
+
+    context = {
+        'title': '%s - The Phoenix' % page.title,
+        'page': page,
+    }
+
     return render(request, 'page.html', context)
 
 def issue(request, year=None, month=None, day=None):
@@ -124,8 +132,6 @@ def issue(request, year=None, month=None, day=None):
     except Issue.DoesNotExist:
         raise Http404("Issue does not exist")
 
-    print issue.file
-
     context = {
         'issue': issue
     }