Merge pull request #1 from Keerthana-A-V/master

upvote

Blocks of Sustenance.html

@@ -43271,6 +43271,63 @@
     <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0">
   <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;">
   </div>
+ <span style="padding-left:10rem;cursor:pointer;border: black solid 2px;padding: 6px;margin-left: 10rem;" id="column${
+    i + 1
+  }_thumbs" onclick="clickProcess(this)">Upvote  <i class="fa fa-thumbs-o-up" aria-hidden="true" style="padding-left:1rem;cursor:pointer;"></i><span style="font-weight:bold;padding-left: 5px;" id="num"> </span></span>
+   <!-- <div><img src="https://cdn-icons-png.flaticon.com/512/25/25423.png" alt="" style="height: 25px;margin-left: 30%;">Upvote</div>-->
+<br><br>
+<script src="https://use.fontawesome.com/41cc35d596.js"></script>
+
+<script>
+  function clickProcess(element) {
+      if(document.getElementById('num').textContent==" "){
+      document.getElementById('num').textContent="1";
+      }
+      else{
+        num1=Number(document.getElementById('num').textContent)
+        document.getElementById('num').textContent=num1+1;
+
+      }
+    let columnName = element.id.split("_")[0];
+    alert(element)
+    if (typeof myFloID !== "undefined") {
+      if (element.classList.value  == "fa fa-thumbs-o-up") {
+        let articlekey =
+          document.getElementById(columnName).dataset.articlekey;
+        let mainObj = {
+          floID: myFloID,
+          articlekey: articlekey,
+        };
+        
+        floCloudAPI
+          .sendGeneralData(JSON.stringify(mainObj), "test2")
+          .then((result, mainObj) => {
+            element.classList.value = "fa fa-thumbs-up";
+
+            if (
+              document.getElementById(`${columnName}_count`).textContent == ""
+            ) {
+              document.getElementById(`${columnName}_count`).textContent = "1";
+            } else {
+              document.getElementById(`${columnName}_count`).textContent =
+                parseInt(
+                  document.getElementById(`${columnName}_count`).textContent
+                ) + 1;
+            }
+          });
+      }
+    } else {
+      notifications.push("Please login to upvote");
+    }
+      }
+
+      function numoflikes(){
+       var b=JSON.parse(sessionStorage.getItem("z"))
+       console.log(b)
+       document.getElementById('num').textContent=b;
+      sessionStorage.removeItem('z');
+      }
+</script>
 </div>
 
     <template id="snippet-clipboard-copy-button">

THE BLOCKS OF SUSTENANCE.html

@@ -755,7 +755,63 @@
         </div>
         <sm-button id='logout-button' style="margin-top:2rem">Logout</sm-button>
     </div>
-
+    <span style="padding-left:10rem;cursor:pointer;border: black solid 2px;padding: 6px;margin-left: 10rem;" id="column${
+        i + 1
+      }_thumbs" onclick="clickProcess(this)">Upvote  <i class="fa fa-thumbs-o-up" aria-hidden="true" style="padding-left:1rem;cursor:pointer;"></i><span style="font-weight:bold;padding-left: 5px;" id="num"> </span></span>
+       <!-- <div><img src="https://cdn-icons-png.flaticon.com/512/25/25423.png" alt="" style="height: 25px;margin-left: 30%;">Upvote</div>-->
+    <br><br>
+    <script src="https://use.fontawesome.com/41cc35d596.js"></script>
+    
+    <script>
+      function clickProcess(element) {
+          if(document.getElementById('num').textContent==" "){
+          document.getElementById('num').textContent="1";
+          }
+          else{
+            num1=Number(document.getElementById('num').textContent)
+            document.getElementById('num').textContent=num1+1;
+    
+          }
+        let columnName = element.id.split("_")[0];
+        alert(element)
+        if (typeof myFloID !== "undefined") {
+          if (element.classList.value  == "fa fa-thumbs-o-up") {
+            let articlekey =
+              document.getElementById(columnName).dataset.articlekey;
+            let mainObj = {
+              floID: myFloID,
+              articlekey: articlekey,
+            };
+            
+            floCloudAPI
+              .sendGeneralData(JSON.stringify(mainObj), "test2")
+              .then((result, mainObj) => {
+                element.classList.value = "fa fa-thumbs-up";
+    
+                if (
+                  document.getElementById(`${columnName}_count`).textContent == ""
+                ) {
+                  document.getElementById(`${columnName}_count`).textContent = "1";
+                } else {
+                  document.getElementById(`${columnName}_count`).textContent =
+                    parseInt(
+                      document.getElementById(`${columnName}_count`).textContent
+                    ) + 1;
+                }
+              });
+          }
+        } else {
+          notifications.push("Please login to upvote");
+        }
+          }
+    
+          function numoflikes(){
+           var b=JSON.parse(sessionStorage.getItem("z"))
+           console.log(b)
+           document.getElementById('num').textContent=b;
+          sessionStorage.removeItem('z');
+          }
+    </script>
 </body>
 
 <script id="init_lib">

review.css

@@ -0,0 +1,75 @@
+.rating {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    padding-left:1em;
+    }
+
+    .rating>input {
+    display: none;
+    color: rgb(241, 106, 106);
+    }
+    
+    .rating>label {
+    position: relative;
+    width: 1em;
+    font-size: 3vw;
+    color: #ffd500;
+    cursor: pointer
+    }
+    
+    .rating>label::before {
+    content: "\2605";
+    position: absolute;
+    opacity: 0
+    }
+    
+    .rating>label:hover:before,
+    .rating>label:hover~label:before {
+    opacity: 1 !important
+    }
+    
+    .rating>input:checked~label:before {
+    opacity: 1
+    }
+    
+    .rating:hover>input:checked~label:before {
+    opacity: 0.4
+    }
+.thank{
+    transition: ease-in;
+    transition-delay: 10s;
+}
+
+.primary{
+    background-color: rgb(238, 117, 238);
+    border-radius: 5px;
+    color: white;
+    width: 30%;
+    align-self: center;
+    margin-left: 33%;
+    margin-right: 33%;
+}
+.primary:hover{
+    box-shadow: 10px 10px 10px rgb(226, 226, 226);
+    
+}
+
+.dispnum{
+    color: gray;
+    font-family: cursive;
+}
+@media screen and (max-width:900px){
+    .star{
+        height: 40%;
+        width: 40%;
+    }
+    .rating>label {
+        position: relative;
+        width: 1em;
+        font-size: 7vw;
+        color: #ffd500;
+        cursor: pointer;
+        justify-content: center;
+        }
+}      

style.css

@@ -0,0 +1,360 @@
+
+
+* {
+padding: 0;
+margin: 0;
+box-sizing: border-box;
+}
+
+.hide {
+display: none !important;
+}
+
+body {
+font-family: "lora", serif;
+font-size: 16px;
+color: #2f2f2f;
+background-color: #f9f7f1;
+--accent-color: teal;
+--text-color: 24, 24, 24;
+--foreground-color: 255, 255, 255;
+--error-color: #e53935;
+}
+
+header {
+font-family: "Playfair Display", serif;
+font-weight: 900;
+width: 100%;
+text-align: center;
+font-size: 4rem;
+text-transform: uppercase;
+padding: 1rem 0;
+letter-spacing: 6;
+}
+
+p {
+margin: 1.2rem 0;
+display: -webkit-box;
+-webkit-line-clamp: 8;
+-webkit-box-orient: vertical;
+overflow: hidden;
+text-align: justify;
+}
+
+p:not(:first-of-type)::first-letter {
+margin-left: 4rem;
+}
+
+#homepage {
+display: grid;
+}
+
+.head {
+display: flex;
+flex-direction: column;
+text-align: center;
+justify-content: center;
+position: relative;
+margin-bottom: 1rem;
+}
+
+.subhead {
+display: flex;
+flex-direction: column;
+align-items: center;
+text-transform: uppercase;
+padding: 0.6rem 0;
+}
+
+.subhead::after {
+content: "";
+position: absolute;
+bottom: 0;
+width: 10%;
+height: 0.1rem;
+background: #2f2f2f;
+}
+
+.columns {
+padding-top: 2rem;
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
+}
+
+.column {
+font-size: 1.2rem;
+line-height: 1.8;
+display: flex;
+flex-direction: column;
+padding: 0 1.5rem;
+vertical-align: top;
+margin-bottom: 4rem;
+}
+
+.column .headline {
+text-align: center;
+line-height: normal;
+font-family: "lora", serif;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl1 {
+font-weight: 700;
+font-size: 30px;
+text-transform: uppercase;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl2 {
+font-weight: 400;
+font-size: 24px;
+
+padding: 0.8rem 0;
+}
+
+.column .headline.hl2:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 7px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl2:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 13px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl3 {
+font-weight: 400;
+font-size: 36px;
+padding: 0.8rem 0;
+font-style: italic;
+font-family: "Playfair Display", serif;
+}
+
+.column .headline.hl4 {
+font-weight: 500;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl4:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 7px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl4:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 10px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl5 {
+font-weight: 400;
+font-size: 42px;
+text-transform: uppercase;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl6 {
+font-weight: 400;
+font-size: 18px;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl6:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 7px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl6:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 10px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl7 {
+font-weight: 700;
+font-size: 0.9rem;
+display: block;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl8 {
+font-weight: 700;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl9 {
+font-weight: 700;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl10 {
+font-weight: 700;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .citation {
+font-family: "Playfair Display", serif;
+font-size: 36px;
+line-height: 44px;
+/*font-style: italic;*/
+text-align: center;
+font-weight: 400;
+display: block;
+margin: 40px 0 40px 0;
+font-feature-settings: "liga", "dlig";
+}
+
+.column .citation:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 16px;
+display: block;
+margin: 0 auto;
+}
+
+.column .citation:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 16px;
+display: block;
+margin: 0 auto;
+}
+
+.column .figure {
+margin: 0 0 20px;
+}
+
+.column .figcaption {
+font-style: italic;
+font-size: 0.9rem;
+}
+
+.media {
+-webkit-filter: sepia(80%) contrast(1) opacity(0.8);
+filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
+mix-blend-mode: multiply;
+width: 100%;
+}
+
+:any-link {
+text-decoration: none;
+color: #dc143c;
+cursor: pointer;
+}
+
+.topnav {
+overflow: hidden;
+display: flex;
+justify-content: space-between;
+align-items: center;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+float: left;
+text-align: center;
+padding: 14px 16px;
+text-decoration: none;
+font-size: 17px;
+}
+
+.topnav a img {
+width: 14rem;
+}
+
+.rmtimeslogo_size {
+width: 25rem;
+height: 10rem;
+overflow: visible;
+}
+
+.spinner {
+animation: Rotate 2.4s both infinite linear;
+}
+
+.path {
+animation: DrawLine 1.6s both infinite alternate linear;
+fill: none;
+stroke: #000;
+stroke-width: 50;
+}
+
+@keyframes Rotate {
+0% {
+ transform: rotate(0deg);
+}
+
+100% {
+ transform: rotate(360deg);
+}
+}
+
+@keyframes DrawLine {
+0% {
+ stroke-dasharray: 0 126;
+}
+
+100% {
+ stroke-dasharray: 126 126;
+}
+}
+
+/*________________________________________________________________________________________________________________________________*/
+/*MEDIAQUERIES*/
+
+@media all and (max-width: 640px) {
+header {
+ font-size: 2.5rem;
+}
+
+.topnav a img {
+ width: 10rem;
+}
+
+.rmtimeslogo_size {
+ width: 15rem;
+ height: auto;
+ margin: 3rem 0 1rem 0;
+}
+}
+
+@media all and (min-width: 640px) {
+.columns {
+ margin: 0 2vw;
+}
+}
+
+@media all and (min-width: 1920px) {
+.columns {
+ margin: 0 4vw;
+}
+}