From 7ce61a55025ccd724a5cc80289486238651e1df0 Mon Sep 17 00:00:00 2001
From: tdurieux <durieuxthomas@hotmail.com>
Date: Mon, 19 Apr 2021 09:59:52 +0200
Subject: [PATCH] improve style

---
 public/css/style.css          | 85 ++++++++++++++++++-----------------
 public/partials/dashboard.htm | 10 ++++-
 public/partials/faq.htm       | 68 ++++++++++++++--------------
 public/partials/home.htm      |  2 +-
 public/partials/profile.htm   |  2 +-
 public/partials/status.htm    | 51 ++++++++++++---------
 6 files changed, 116 insertions(+), 102 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 7a161cb..08e54db 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -86,42 +86,34 @@ a:hover {
 .card-header .btn {
   border: none;
 }
-.btn,
-.white_border,
-.black_border {
-  border: 1px solid white;
-  background: transparent;
-  color: white;
-  border-radius: 4px;
-}
-.btn,
-.white_border,
-.black_border {
-  color: white;
-}
-.btn::placeholder,
-.white_border::placeholder,
-.black_border::placeholder {
-  /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: #cccccc;
-  opacity: 1; /* Firefox */
-}
-
-.btn,
-.black_border {
+.btn {
   color: #333333;
   border: 1px solid #333333;
+  background: transparent;
+  border-radius: 4px;
 }
-
 .btn:hover,
-a.black_border:hover,
-a.white_border:hover {
-  color: #333333;
-  background-color: #dddddd;
+.btn:active {
+  color: #333333 !important;
+  border: 1px solid #333333;
+  background-color: #dddddd !important;
+  box-shadow: none !important;
+}
+.btn.btn-primary {
+  color: #ffffff;
+  background-color: #4a507b !important;
+}
+.btn.btn-primary:active,
+.btn.btn-primary:hover {
+  color: #dddddd !important;
+  background-color: #363b61 !important;
+}
+.white_border {
+  border: 1px solid white;
+  color: white;
 }
 
-.btn::placeholder,
-.black_border::placeholder {
+.btn::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #666666;
   opacity: 1; /* Firefox */
@@ -175,6 +167,7 @@ a.white_border:hover {
 .files .folder.open > ul {
   display: block;
 }
+
 .files .file::before {
   content: "\f15b";
   font-family: FontAwesome;
@@ -190,19 +183,17 @@ a.white_border:hover {
   content: "\f07b";
   color: #3ba3f8;
 }
+
 .files .folder.open::before {
   content: "\f07c";
 }
 
-.stats {
-  height: 120px;
-  overflow: scroll;
-  border-top: 1px solid #ddd;
-}
-
 .ace_editor {
   height: 100%;
 }
+.ace_scroller {
+  cursor: default;
+}
 
 .paths {
   background-color: #ffffff;
@@ -282,7 +273,20 @@ notebook {
   right: 10px !important;
 }
 
-.accordion-section .panel-default .panel-title a:after {
+.faq-section .panel-default .panel-title a {
+  color: #333333;
+  display: block;
+}
+.faq-section .panel-heading {
+  background-color: #dddddd;
+}
+.faq-section .panel-default {
+  background-color: #f8f8f8;
+}
+.faq-section .panel-default .panel-title {
+  margin-bottom: 0;
+}
+.faq-section .panel-default .panel-title a:after {
   font-family: "FontAwesome";
   font-style: normal;
   font-size: 3rem;
@@ -290,10 +294,10 @@ notebook {
   float: right;
   margin-top: -12px;
 }
-.accordion-section .panel-default .panel-title a.collapsed:after {
+.faq-section .panel-default .panel-title a.collapsed:after {
   content: "\f107";
 }
-.accordion-section .panel-default .panel-body {
+.faq-section .panel-default .panel-body {
   font-size: 1.2rem;
 }
 
@@ -322,9 +326,6 @@ loc .lang {
   text-align: center;
 }
 
-.ace_scroller {
-  cursor: default;
-}
 .featurette-divider {
   margin: 5rem 0; /* Space out the Bootstrap <hr> more */
 }
diff --git a/public/partials/dashboard.htm b/public/partials/dashboard.htm
index 0806443..ed412e6 100644
--- a/public/partials/dashboard.htm
+++ b/public/partials/dashboard.htm
@@ -1,7 +1,7 @@
 <div class="container-fluid h-100">
   <div class="row h-100">
     <div class="leftCol shadow p-1 h-100 overflow-auto">
-      <a class="btn btn-block black_border" href="/anonymize">
+      <a class="btn btn-primary btn-block black_border" href="/anonymize">
         <i class="fa fa-plus-circle" aria-hidden="true"></i> Anonymize
       </a>
       <a
@@ -117,11 +117,17 @@
                 </td>
                 <!-- <td>{{repo.commit.substring(0, 6)}}</td> -->
                 <td class="text-center align-middle">{{repo.terms.length}}</td>
-                <td class="text-center align-middle">
+                <td
+                  class="text-center align-middle"
+                  ng-class="{'alert-danger': repo.status == 'expired', 'alert-warning': repo.status == 'removed'}"
+                >
                   {{repo.status | title}}
                 </td>
                 <td
                   class="text-center align-middle"
+                  title="Expiration Mode: {{repo.options.expirationMode | title}}"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
                   ng-bind="repo.options.expirationDate | date"
                   ng-if="repo.options.expirationMode!='never'"
                 ></td>
diff --git a/public/partials/faq.htm b/public/partials/faq.htm
index 48968f6..4bf793f 100644
--- a/public/partials/faq.htm
+++ b/public/partials/faq.htm
@@ -2,26 +2,26 @@
   <div class="row h-100">
     <div class="container px-md-3 px-sm-0">
       <section
-        class="accordion-section clearfix mt-3"
-        aria-label="Question Accordions"
+        class="faq-section clearfix mt-3"
+        aria-label="FAQs"
       >
         <div class="container">
-          <h2>Frequently Asked Questions</h2>
+          <h2 class="text-center p-5">Frequently asked questions (FAQs)</h2>
           <div
             class="panel-group"
-            id="accordion"
+            id="faq"
             role="tablist"
             aria-multiselectable="true"
           >
-            <div class="panel panel-default">
-              <div class="panel-heading p-3 mb-3" role="tab" id="heading0">
+            <div class="panel panel-default mb-4">
+              <div class="panel-heading p-3" role="tab" id="heading0">
                 <h3 class="panel-title">
                   <a
                     class="collapsed"
                     role="button"
                     title=""
                     data-toggle="collapse"
-                    data-parent="#accordion"
+                    data-parent="#faq"
                     href="#download"
                     aria-expanded="true"
                     aria-controls="download"
@@ -36,7 +36,7 @@
                 role="tabpanel"
                 aria-labelledby="heading0"
               >
-                <div class="panel-body px-3 mb-4">
+                <div class="panel-body p-3">
                   <p>
                     It is currently not possible to download an anonymized
                     repository neither to clone it.
@@ -49,15 +49,15 @@
               </div>
             </div>
 
-            <div class="panel panel-default">
-              <div class="panel-heading p-3 mb-3" role="tab" id="heading6">
+            <div class="panel panel-default mb-4">
+              <div class="panel-heading p-3" role="tab" id="heading6">
                 <h3 class="panel-title">
                   <a
                     class="collapsed"
                     role="button"
                     title=""
                     data-toggle="collapse"
-                    data-parent="#accordion"
+                    data-parent="#faq"
                     href="#limitation"
                     aria-expanded="true"
                     aria-controls="download"
@@ -72,7 +72,7 @@
                 role="tabpanel"
                 aria-labelledby="heading6"
               >
-                <div class="panel-body px-3 mb-4">
+                <div class="panel-body p-3">
                   <p>
                     <ul>
                       <li>
@@ -93,15 +93,15 @@
               </div>
             </div>
 
-            <div class="panel panel-default">
-              <div class="panel-heading p-3 mb-3" role="tab" id="heading1">
+            <div class="panel panel-default mb-4">
+              <div class="panel-heading p-3" role="tab" id="heading1">
                 <h3 class="panel-title">
                   <a
                     class="collapsed"
                     role="button"
                     title=""
                     data-toggle="collapse"
-                    data-parent="#accordion"
+                    data-parent="#faq"
                     href="#formats"
                     aria-expanded="true"
                     aria-controls="formats"
@@ -116,7 +116,7 @@
                 role="tabpanel"
                 aria-labelledby="heading1"
               >
-                <div class="panel-body px-3 mb-4">
+                <div class="panel-body p-3">
                   <p>
                     Anonymous Github is able to display pure textual files, such as text or source code. It can also render images, PDFs, and notbooks.
                     However, only textual based files are anonymized. Anonymous Github considers the following file format as textual:
@@ -130,15 +130,15 @@
               </div>
             </div>
 
-            <div class="panel panel-default">
-              <div class="panel-heading p-3 mb-3" role="tab" id="heading2">
+            <div class="panel panel-default mb-4">
+              <div class="panel-heading p-3" role="tab" id="heading2">
                 <h3 class="panel-title">
                   <a
                     class="collapsed"
                     role="button"
                     title=""
                     data-toggle="collapse"
-                    data-parent="#accordion"
+                    data-parent="#faq"
                     href="#cost"
                     aria-expanded="true"
                     aria-controls="cost"
@@ -153,7 +153,7 @@
                 role="tabpanel"
                 aria-labelledby="heading2"
               >
-                <div class="panel-body px-3 mb-4">
+                <div class="panel-body p-3">
                   <p>
                     Anonymous Github is free to use, however the server costs me hundreds of dollars per year, a small donation to cover the cost of the server would be largely appreciated.
                     You can support me financially by <a href="https://github.com/sponsors/tdurieux/" target="__self">Sponsoring my GitHub account</a>, send me money thought <a href="https://ko-fi.com/tdurieux" target="__self">Ko-fi</a> or by clicking on the "Support me" button.
@@ -162,15 +162,15 @@
               </div>
             </div>
 
-            <div class="panel panel-default">
-              <div class="panel-heading p-3 mb-3" role="tab" id="heading3">
+            <div class="panel panel-default mb-4">
+              <div class="panel-heading p-3" role="tab" id="heading3">
                 <h3 class="panel-title">
                   <a
                     class="collapsed"
                     role="button"
                     title=""
                     data-toggle="collapse"
-                    data-parent="#accordion"
+                    data-parent="#faq"
                     href="#data"
                     aria-expanded="true"
                     aria-controls="data"
@@ -185,7 +185,7 @@
                 role="tabpanel"
                 aria-labelledby="heading3"
               >
-                <div class="panel-body px-3 mb-4">
+                <div class="panel-body p-3">
                   <p>
                     The data stored on Anonymous Github are never used or shared in any cases. 
                     When a repository is removed or expired only the configuration of the repository is conserved to be able to restore easily the repository and to ensure that no future repository will use the same repository id. 
@@ -194,15 +194,15 @@
               </div>
             </div>
 
-            <div class="panel panel-default">
-              <div class="panel-heading p-3 mb-3" role="tab" id="heading4">
+            <div class="panel panel-default mb-4">
+              <div class="panel-heading p-3" role="tab" id="heading4">
                 <h3 class="panel-title">
                   <a
                     class="collapsed"
                     role="button"
                     title=""
                     data-toggle="collapse"
-                    data-parent="#accordion"
+                    data-parent="#faq"
                     href="#privacy"
                     aria-expanded="true"
                     aria-controls="privacy"
@@ -217,24 +217,24 @@
                 role="tabpanel"
                 aria-labelledby="heading4"
               >
-                <div class="panel-body px-3 mb-4">
+                <div class="panel-body p-3">
                   <p>
-                    The viewers of the repository are not tracked, only the number of view of the repository is collected (a single incremental digit).
+                    The viewers of the repository are not tracked, only the number of view of the repository is collected (a incremental digit).
                     It is not possible for the repository owner neither for Anonymous GitHub to track down the identity of the viewer. 
                   </p>
                 </div>
               </div>
             </div>
 
-            <div class="panel panel-default">
-              <div class="panel-heading p-3 mb-3" role="tab" id="heading5">
+            <div class="panel panel-default mb-4">
+              <div class="panel-heading p-3" role="tab" id="heading5">
                 <h3 class="panel-title">
                   <a
                     class="collapsed"
                     role="button"
                     title=""
                     data-toggle="collapse"
-                    data-parent="#accordion"
+                    data-parent="#faq"
                     href="#deploy"
                     aria-expanded="true"
                     aria-controls="deploy"
@@ -249,9 +249,9 @@
                 role="tabpanel"
                 aria-labelledby="heading5"
               >
-                <div class="panel-body px-3 mb-4">
+                <div class="panel-body p-3">
                   <p>
-                    Anonymous GitHub is fully open source and the deployment of a new instance is relatively easy. More information can be found on the GitHub repository of the project.
+                    Anonymous GitHub is fully open source and the deployment of a new instance is relatively easy. More information can be found on the <a href="https://github.com/tdurieux/anonymous_github/" target="_blank">GitHub repository</a> of the project.
                   </p>
                 </div>
               </div>
diff --git a/public/partials/home.htm b/public/partials/home.htm
index 3cb1c44..f54d9d7 100644
--- a/public/partials/home.htm
+++ b/public/partials/home.htm
@@ -18,7 +18,7 @@
               Double-blind your repository in 5 min as {{stat.nbUsers | number}} users already did.
             </h4>
             <span ng-if="!user">
-              <a href="/github/login" target="_self" class="p-2 white_border"
+              <a href="/github/login" target="_self" class="btn p-2 white_border"
                 >Login with GitHub to anonymize</a
               >
             </span>
diff --git a/public/partials/profile.htm b/public/partials/profile.htm
index ed8106e..cafa7bb 100644
--- a/public/partials/profile.htm
+++ b/public/partials/profile.htm
@@ -250,7 +250,7 @@
     <button
       id="save"
       type="submit"
-      class="btn black_border"
+      class="btn btn-primary"
       ng-click="saveDefault($event)"
     >
       Save
diff --git a/public/partials/status.htm b/public/partials/status.htm
index fd84c2b..2a39e0c 100644
--- a/public/partials/status.htm
+++ b/public/partials/status.htm
@@ -6,8 +6,8 @@
 
     <p>
       The current status of your repository. The repository will take few
-      minutes to get ready depending on the size of the repository.
-      Visit the <a href="/faq">FAQ</a> for more information.
+      minutes to get ready depending on the size of the repository. Visit the
+      <a href="/faq">FAQ</a> for more information.
     </p>
 
     <div class="progress" style="height: 25px;">
@@ -22,9 +22,35 @@
         {{repo.status | title}}
       </div>
     </div>
+
+    <p>
+      Your repository will be available at
+      <a href="/r/{{repoId}}" target="__self">/r/{{repoId}}</a>.
+    </p>
+    <p ng-if="repo.options.page">
+      Your GitHub Page will be available at
+      <a href="/w/{{repoId}}" target="__self">/w/{{repoId}}</a>.
+    </p>
+
+    <p class="text-center">
+      <a
+        class="btn btn-primary"
+        href="/r/{{repoId}}"
+        target="__self"
+        ng-if="repo.status == 'ready'"
+        >Go to the anonymized repository</a
+      >
+      <a
+        class="btn"
+        href="/w/{{repoId}}"
+        target="__self"
+        ng-if="repo.options.page && repo.status == 'ready'"
+        >Go to the anonymized Gh-page</a
+      >
+    </p>
   </section>
 
-  <hr class="featurette-divider" />
+  <hr />
 
   <section class="py-4">
     <h2>Support the project</h2>
@@ -94,23 +120,4 @@
       </div>
     </div>
   </section>
-
-  <hr class="featurette-divider" />
-
-  <section class="py-4">
-    <a
-      class="btn btn-primary"
-      href="/r/{{repoId}}"
-      target="__self"
-      ng-if="repo.status == 'ready'"
-      >Go to the anonymized repository</a
-    >
-    <a
-      class="btn btn-primary"
-      href="/w/{{repoId}}"
-      target="__self"
-      ng-if="repo.options.page && repo.status == 'ready'"
-      >Go to the anonymized Gh-page</a
-    >
-  </section>
 </div>