Sign out button for protected pages (#97)

Merge pull request #97 from Voog/78_Signout_Button
Voog · Apr 13, 2018 · cdad448 · cdad448
2 parents 1f86753 + 00427de
commit cdad448
Show file tree

Hide file tree

Showing 12 changed files with 158 additions and 11 deletions.
diff --git a/components/footer.tpl b/components/footer.tpl
@@ -6,4 +6,7 @@
     </div>
     <div class="voog-reference">{% loginblock %}{{ "footer_login_link" | lc }}{% endloginblock %}</div>
   </div>
-</footer>
+  {% if page.private? %}
+    <div class="signout-btn-pad"></div>
+  {% endif %}
+</footer>
diff --git a/components/site-signout.tpl b/components/site-signout.tpl
@@ -0,0 +1,11 @@
+{% if editmode != true and previewmode != true and page.private? %}
+  <div class="signout-btn-wrap">
+    <a class="signout-link" data-disable-forcetouch="true" href="/admin/site/sessions/logout">
+      <span class="signout-ico">
+        <svg class="signout-svg" transform="scale(1.1)" width="16" height="30" xmlns="http://www.w3.org/2000/svg">
+          <path stroke="currentColor" fill="none" d="M12.5 19.5v3H1.523C.96 22.5.5 22.053.5 21.5v-14c0-.552.458-1 1.023-1H12.5v3m2.5 5l-5.455 4 5.455-4zm-5.455-4l5.455 4-5.455-4zm-5.558 4H14.5"></path>
+        </svg>
+      </span><span class="signout-name">{{ "sign_out" | lc }}</span>
+    </a>
+  </div>
+{% endif %}
diff --git a/layouts/blog___news.tpl b/layouts/blog___news.tpl
@@ -64,6 +64,7 @@
     </div>
   </div>
   {% include "mobilemenu" %}
+  {% include "site-signout" %}
   {% include "javascripts" %}
   {% include "edicy-tools" %}
 </body>

diff --git a/layouts/blog_article.tpl b/layouts/blog_article.tpl
@@ -87,6 +87,9 @@
                   <div class="comment-info">({{ comment.author }}, {{ comment.created_at | format_date: "long" }}) {% removebutton %}</div>
                 </div>
               {% endfor %}
+              {% if page.private? %}
+              <div class="signout-btn-margin"></div>
+              {% endif %}
             </section>
           </div>
         </div>
@@ -95,6 +98,7 @@
     {% include "footer" %}
   </div>
   {% include "mobilemenu" %}
+  {% include "site-signout" %}
   {% include "javascripts" %}
   {% include "edicy-tools" %}
 </body>

diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl
@@ -28,6 +28,7 @@
     </div>
   </div>
   {% include "mobilemenu" %}
+  {% include "site-signout" %}
   {% include "javascripts" %}
   {% include "edicy-tools" %}
 </body>

diff --git a/layouts/front_page.tpl b/layouts/front_page.tpl
@@ -41,6 +41,7 @@
     </div>
   </div>
   {% include "mobilemenu" %}
+  {% include "site-signout" %}
   {% include "javascripts" %}
   {% include "edicy-tools" %}
 

diff --git a/manifest.json b/manifest.json
@@ -36,9 +36,9 @@
     {
       "content_type": "component",
       "component": true,
-      "file": "components/template-cs-button.tpl",
-      "layout_name": "template-cs-button",
-      "title": "template-cs-button"
+      "file": "components/edicy-tools-styles.tpl",
+      "layout_name": "edicy-tools-styles",
+      "title": "edicy-tools-styles"
     },
     {
       "content_type": "component",
@@ -61,6 +61,13 @@
       "layout_name": "template-meta",
       "title": "template-meta"
     },
+    {
+      "content_type": "component",
+      "component": true,
+      "file": "components/site-signout.tpl",
+      "layout_name": "site-signout",
+      "title": "site-signout"
+    },
     {
       "content_type": "component",
       "component": true,
@@ -106,16 +113,16 @@
     {
       "content_type": "component",
       "component": true,
-      "file": "components/edicy-tools-styles.tpl",
-      "layout_name": "edicy-tools-styles",
-      "title": "edicy-tools-styles"
+      "file": "components/template-cs-content.tpl",
+      "layout_name": "template-cs-content",
+      "title": "template-cs-content"
     },
     {
       "content_type": "component",
       "component": true,
-      "file": "components/template-cs-content.tpl",
-      "layout_name": "template-cs-content",
-      "title": "template-cs-content"
+      "file": "components/template-cs-button.tpl",
+      "layout_name": "template-cs-button",
+      "title": "template-cs-button"
     },
     {
       "content_type": "component",

diff --git a/sources/stylesheets/_site-signout.scss b/sources/stylesheets/_site-signout.scss
@@ -0,0 +1,54 @@
+.signout-btn-wrap {
+  position: fixed;
+  right: 5px;
+  bottom: 5px;
+  z-index: 10000;
+  white-space: nowrap;
+  background-color: $color-toolbar-bg;
+  height: 35px;
+  border-radius: 3px;
+  text-align: center;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
+
+  &:hover {
+    background-color: $color-silver-2;
+  }
+
+  .signout-link {
+    position: relative;
+    z-index: 10;
+    display: block;
+    padding: 0 10px;
+  }
+
+  .signout-name {
+    display: inline-block;
+    vertical-align: top;
+    font-size: 14px;
+    font-weight: 400;
+    font-family: $avenir;
+    line-height: 37px;
+    padding-left: 8px;
+    color: rgba($color-common-gray, 0.8);
+
+    &:hover {
+      color: rgba($color-common-gray, 0.9);
+    }
+  }
+
+  .signout-ico {
+    height: 35px;
+    display: inline-block;
+    color: rgba($color-common-gray, 0.7)
+  }
+
+  .signout-svg {
+    margin-top: 3px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .signout-btn-pad {
+    padding-top: 20px;
+  }
+}
diff --git a/sources/stylesheets/main.scss b/sources/stylesheets/main.scss
@@ -1292,6 +1292,10 @@ $flags:
     margin: 0;
     padding: 45px 0 20px;
   }
+
+  .signout-btn-margin{
+    margin-bottom: 20px;
+  }
 }
 
 .comment-form {
@@ -2308,3 +2312,4 @@ table {
 
 
 @import 'buy-button';
+@import 'site-signout';
diff --git a/sources/stylesheets/modules/_variables.scss b/sources/stylesheets/modules/_variables.scss
@@ -12,7 +12,14 @@ $error-color: #c70909;
 $success-color: #409e13;
 $disabled-color: #dadada;
 
+// Sign out button
+$color-common-gray: rgb(27,33,36);
+$color-toolbar-bg: rgb(238,238,238);
+$color-silver-2: rgb(196,196,196);
+
 $font-primary: 'Lato', sans-serif;
+$avenir: 'Avenir Next', 'AvenirX';
+
 $font-size: 18px;
 $font-size-big: 22px;
 $h1-size: 36px;

diff --git a/stylesheets/main.css b/stylesheets/main.css
@@ -1350,6 +1350,9 @@ label .form_control_indicator:before {
   margin: 0;
   padding: 45px 0 20px;
 }
+.comments .signout-btn-margin {
+  margin-bottom: 20px;
+}
 
 .comment-form {
   position: relative;
@@ -2271,3 +2274,53 @@ table th {
 .formatted .edy-buy-button-variants .form_field_select {
   width: initial;
 }
+
+.signout-btn-wrap {
+  position: fixed;
+  right: 5px;
+  bottom: 5px;
+  z-index: 10000;
+  white-space: nowrap;
+  background-color: #eeeeee;
+  height: 35px;
+  border-radius: 3px;
+  text-align: center;
+  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
+}
+.signout-btn-wrap:hover {
+  background-color: #c4c4c4;
+}
+.signout-btn-wrap .signout-link {
+  position: relative;
+  z-index: 10;
+  display: block;
+  padding: 0 10px;
+}
+.signout-btn-wrap .signout-name {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "Avenir Next", "AvenirX";
+  line-height: 37px;
+  padding-left: 8px;
+  color: rgba(27, 33, 36, 0.8);
+}
+.signout-btn-wrap .signout-name:hover {
+  color: rgba(27, 33, 36, 0.9);
+}
+.signout-btn-wrap .signout-ico {
+  height: 35px;
+  display: inline-block;
+  color: rgba(27, 33, 36, 0.7);
+}
+.signout-btn-wrap .signout-svg {
+  margin-top: 3px;
+}
+
+@media screen and (max-width: 600px) {
+  .signout-btn-pad {
+    padding-top: 20px;
+  }
+}
diff --git a/stylesheets/main.min.css b/stylesheets/main.min.css