Merge 034b345 into 4d98e92

andela · Mar 25, 2019 · cbaf00e · cbaf00e
2 parents 4d98e92 + 034b345
commit cbaf00e
Show file tree

Hide file tree

Showing 6 changed files with 273 additions and 22 deletions.
diff --git a/ui/css/style.css b/ui/css/style.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .go-top-btn {
   position: fixed;
   width: 50px;
@@ -747,6 +748,41 @@ a.button {
   .nav-search {
     margin-right: 15px; } }
 
+.rate {
+  float: left;
+  height: 46px;
+  padding: 7px 10px; }
+
+.rate:not(:checked) > input {
+  position: absolute;
+  top: -9999px; }
+
+.rate:not(:checked) > label {
+  float: right;
+  width: 1em;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: 21px;
+  color: #ccc; }
+
+.rate:not(:checked) > label:before {
+  content: '★ '; }
+
+.rate > input:checked ~ label {
+  color: #ffc700; }
+
+.rate:not(:checked) > label:hover,
+.rate:not(:checked) > label:hover ~ label {
+  color: #deb217; }
+
+.rate > input:checked + label:hover,
+.rate > input:checked + label:hover ~ label,
+.rate > input:checked ~ label:hover,
+.rate > input:checked ~ label:hover ~ label,
+.rate > label:hover ~ input:checked ~ label {
+  color: #c59b08; }
+
 /* Pages */
 .article-text {
   min-height: 650px;
@@ -867,7 +903,7 @@ a.button {
 
 .article-side-actions {
   position: fixed;
-  right: 5vw;
+  right: 3vw;
   height: 650px;
   top: 40vh;
   margin-left: 15px;
@@ -880,6 +916,8 @@ a.button {
   display: flex;
   align-items: center;
   flex-direction: column; }
+  .article-side-actions button {
+    background-color: transparent; }
 
 .view-favorites {
   display: flex;
@@ -894,6 +932,60 @@ a.button {
 .star-2 {
   font-size: 1.5rem; }
 
+.wrapper2 {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end; }
+
+.rating-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-right: 20px; }
+  .rating-wrapper p {
+    font-size: 1rem;
+    color: rgba(0, 0, 0, 0.3);
+    text-align: right; }
+
+.article-share {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  font-size: 1rem;
+  color: rgba(0, 0, 0, 0.3);
+  text-align: right;
+  padding-right: 20px; }
+  .article-share button {
+    background-color: transparent; }
+
+@media screen and (max-width: 768px) {
+  .article-side-actions {
+    position: static;
+    flex-direction: row;
+    align-content: center;
+    height: auto;
+    width: 100%;
+    transform: none;
+    -webkit-transform: none;
+    margin: 0; }
+    .article-side-actions span {
+      white-space: nowrap;
+      margin-right: 30px; }
+    .article-side-actions .article-icon {
+      margin-top: 0; }
+    .article-side-actions * {
+      margin-right: 20px;
+      display: inline-flex;
+      align-items: center; }
+      .article-side-actions * i {
+        display: flex; }
+    .article-side-actions button:nth-child(4) {
+      margin-top: -5px;
+      margin-right: 10px; }
+    .article-side-actions button:nth-child(5) {
+      margin-top: -4px; } }
+
 .articles-filter {
   font-size: 18px;
   margin: 20px 0 40px 0; }

diff --git a/ui/pages/articles-view.html b/ui/pages/articles-view.html
@@ -59,26 +59,6 @@ <h1 class="article-view-title">North Antartic View</h1>
               <span>Image</span>
             </div>
           </div>
-          <div class="article-side-actions">
-            <span>5 min</span>
-
-            <button class="article-icon hover-primary margin-top">
-              <i class="fa fa-thumbs-up"></i>
-            </button>
-            <button class="article-icon hover-primary margin-top">
-              <i class="fa fa-thumbs-down article-icon"></i>
-            </button>
-            <!-- <button class="article-icon margin-top">
-              <i class="fa fa-star-o"></i>
-            </button>-->
-            <!-- <div class="view-favorites">
-              Stars
-              <div class="view-stars">
-                <span class="color-gray star-1"></span>
-                <span class="color-gray star-2"></span>
-              </div>
-            </div> -->
-          </div>
           <div class="row">
             <div class="col-12">
               <p class="article-content">
@@ -109,11 +89,76 @@ <h1 class="article-view-title">North Antartic View</h1>
               </p>
 
               <p class="article-date">Published On: July 25, 2018</p>
+
+              <div class="row">
+                  <div class="article-side-actions">
+                      <span>5 min</span>
+                      <span class="article-icon hover-primary margin-top">&nbsp;4&nbsp;<i class="fa fa-star-o"></i></span>
+                      <button class="article-icon hover-primary margin-top">
+                        <i class="fa fa-thumbs-up"></i>
+                      </button>
+                      <button class="article-icon hover-primary margin-top">
+                        <i class="fa fa-thumbs-down article-icon"></i>
+                      </button>
+                      <button class="article-icon hover-primary margin-top">
+                        <i
+                          onclick="bookmarkIcon(this)"
+                          class="fa fa-bookmark article-icon"
+                          title="bookmark this article"
+                        ></i>
+                      <!-- <button class="article-icon margin-top">
+                        <i class="fa fa-star-o"></i>
+                      </button>-->
+                      <!-- <div class="view-favorites">
+                        Stars
+                        <div class="view-stars">
+                          <span class="color-gray star-1"></span>
+                          <span class="color-gray star-2"></span>
+                        </div>
+                      </div> -->
+                    </div>
+                <div class="article-share">
+                  <p>Share this article</p>
+                  <button class="article-icon hover-primary">
+                    <i class="fa fa-facebook-square" title="Share via Facebook"></i>
+                  </button>
+                  <button class="article-icon hover-primary">
+                    <i class="fa fa-twitter-square" title="Share via Twitter"></i>
+                  </button>
+                  <button class="article-icon hover-primary">
+                    <i class="fa fa-linkedin-square" title="Share via LinkedIn"></i>
+                  </button>
+                  <button class="article-icon hover-primary">
+                    <i class="fa fa-envelope" title="Share via Mail "></i>
+                  </button>
+                </div>
+                <div class="rating-wrapper">
+                    <p>Rate this article</p>
+                    <div class="rate">
+                        <input type="radio" id="star5" name="rate" value="5" />
+                        <label for="star5" title="text">5 stars</label>
+                        <input type="radio" id="star4" name="rate" value="4" />
+                        <label for="star4" title="text">4 stars</label>
+                        <input type="radio" id="star3" name="rate" value="3" />
+                        <label for="star3" title="text">3 stars</label>
+                        <input type="radio" id="star2" name="rate" value="2" />
+                        <label for="star2" title="text">2 stars</label>
+                        <input type="radio" id="star1" name="rate" value="1" />
+                        <label for="star1" title="text">1 star</label>
+                    </div>
+                </div>
+            </div>
             </div>
           </div>
         </div>
       </div>
     </section>
     <a class="go-top-btn" href="#"><i class="fa fa-angle-up"></i></a>
+
+    <script>
+      function bookmarkIcon(x) {
+        x.classList.toggle('fa-bookmark-o');
+      }
+    </script>
   </body>
 </html>
diff --git a/ui/scss/_articles-view-page.scss b/ui/scss/_articles-view-page.scss
@@ -36,7 +36,7 @@
 
 .article-side-actions {
   position: fixed;
-  right: 5vw;
+  right: 3vw;
   height: 650px;
   top: 40vh;
   margin-left: 15px;
@@ -49,6 +49,9 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  button {
+    background-color: transparent;
+  }
 }
 
 .view-favorites {
@@ -64,3 +67,71 @@
 .star-2 {
   font-size: 1.5rem;
 }
+
+.wrapper2 {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  // align-items: right;
+}
+
+.rating-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-right: 20px;
+  p {
+    font-size: 1rem;
+    color: rgba(0, 0, 0, 0.3);
+    text-align: right;
+  }
+}
+
+.article-share {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  font-size: 1rem;
+  color: rgba(0, 0, 0, 0.3);
+  text-align: right;
+  padding-right: 20px;
+  button{
+    background-color: transparent;
+  }
+}
+
+@media screen and (max-width: $tablet-width) {
+  .article-side-actions {
+    position: static;
+    flex-direction: row;
+    align-content: center;
+    height: auto;
+    width: 100%;
+    transform: none;
+    -webkit-transform: none;
+    margin: 0;
+    span {
+      white-space: nowrap;
+      margin-right: 30px;
+    }
+    .article-icon {
+      margin-top: 0;
+    }
+    * {
+      margin-right: 20px;
+      display: inline-flex;
+      align-items: center;
+      i {
+        display: flex;
+      }
+    }
+    button:nth-child(4) {
+      margin-top: -5px;
+      margin-right: 10px;
+    }
+    button:nth-child(5) {
+      margin-top: -4px;
+    }
+  }
+}
diff --git a/ui/scss/_star-rating.scss b/ui/scss/_star-rating.scss
@@ -0,0 +1,35 @@
+.rate {
+    float: left;
+    height: 46px;
+    padding: 7px 10px;
+}
+.rate:not(:checked) > input {
+    position:absolute;
+    top:-9999px;
+}
+.rate:not(:checked) > label {
+    float:right;
+    width:1em;
+    overflow:hidden;
+    white-space:nowrap;
+    cursor:pointer;
+    font-size:21px;
+    color:#ccc;
+}
+.rate:not(:checked) > label:before {
+    content: '★ ';
+}
+.rate > input:checked ~ label {
+    color: #ffc700;    
+}
+.rate:not(:checked) > label:hover,
+.rate:not(:checked) > label:hover ~ label {
+    color: #deb217;  
+}
+.rate > input:checked + label:hover,
+.rate > input:checked + label:hover ~ label,
+.rate > input:checked ~ label:hover,
+.rate > input:checked ~ label:hover ~ label,
+.rate > label:hover ~ input:checked ~ label {
+    color: #c59b08;
+}
diff --git a/ui/scss/_variables.scss b/ui/scss/_variables.scss
@@ -4,3 +4,10 @@ $primary-dark: #1a237e;
 $red: #e74c3c;
 $green: #2ecc71;
 $yellow: #f1c40f;
+$gray: rgba(
+  $color: #000000,
+  $alpha: 0.3
+);
+$tablet-width: 768px;
+$phone-width: 375px;
+$input-border-color: #c4c4c4;
diff --git a/ui/scss/style.scss b/ui/scss/style.scss
@@ -6,6 +6,7 @@
 @import 'form';
 @import 'typography';
 @import 'nav-bar';
+@import 'star-rating';
 
 /* Pages */
 @import 'articles-create-page';