Added demo news view in news.php, expandable rules, about added in ab…

…out.php
swghosh · Aug 15, 2017 · b0e1613 · b0e1613
1 parent 9a1df7b
commit b0e1613
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 8 deletions.
diff --git a/about.php b/about.php
@@ -1,10 +1,54 @@
 <?php include('head.php'); ?>
         <table class="view">
             <tr class="sector"><td colspan="4" class="sector">Information</td></tr>
-            <tr class="stock"><td class="name">About Us</td></tr>
-            <tr class="stock" onclick="document.location = 'https://github.com/swghosh/Campaign-Treasurer-Companion-Web-App/blob/master/LICENSE.MD';"><td class="name">License</td></tr>
-            <tr class="stock"><td class="name">Rules, Regulations and Disclaimer</td></tr>
-            <tr class="stock" onclick="document.location = 'https://github.com/swghosh/Campaign-Treasurer-Companion-Web-App';"><td class="name">Open-source Project on GitHub</td></tr>
-            <td colspan="4" class="sector copyright">© Campaign Treasurer, Prayas 17 Fest, Christ University.<br>Designed and Developed by Swarup Ghosh.</td>
+
+            <tr class="stock" id="about"><td class="name">About Us <span id="about" class="arrow">&#8963;</span></td></tr>
+            <tr class="news" id="about"><td class="time">Campaign Treasurer Web App</td><td class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum dolores ex facilis eum excepturi. Accusantium rem repellat fugit nesciunt pariatur eum itaque odio minima autem, aperiam, eligendi quidem labore nam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit consequatur, facere necessitatibus, officia, molestias facilis cumque placeat molestiae aut provident quos deserunt! Impedit est accusantium nisi itaque eos, molestias autem.</td></tr>
+
+            <tr class="stock" id="rules"><td class="name">Rules, Regulations and Disclaimer <span id="rules" class="arrow">&#8963;</span></td></tr>
+            <tr class="news" id="rules"><td class="time">Ruleset, Disclaimer</td><td class="news">The list of rules and regulations are to be put up here soon. Thank you for your patience. Request all the participants to go through the same at a later time to be aware of the ruleset that is to abided at all times of the event proceedings. A list of clauses under the head disclaimer are also to be put up here soon.</td></tr>
+
+            <tr class="sector"><td class="sector">Project</td></tr>
+
+            <tr class="stock" onclick="document.location = 'https://github.com/swghosh/Campaign-Treasurer-Companion-Web-App/blob/master/LICENSE.MD';"><td class="name">License <span class="arrow">&#8599;</span></td></tr>
+            <tr class="stock" onclick="document.location = 'https://github.com/swghosh/Campaign-Treasurer-Companion-Web-App';"><td class="name">Open-source Project on GitHub <span class="arrow">&#8599;</span></td></tr>
+
+            <td colspan="4" class="sector copyright">© Campaign Treasurer, Prayas 17 Fest, Christ University.<br>Designed and Developed by <a href="https://github.com/swghosh" class="author">Swarup Ghosh</a>.</td>
         </table>
+        <script>
+            var aboutFlag = true;
+            var rulesFlag = true;
+
+            var aboutItem = document.querySelector('tr.news#about');
+            var rulesItem = document.querySelector('tr.news#rules');
+
+            var aboutArrowSpan = document.querySelector('td.name span.arrow#about');
+            var rulesArrowSpan = document.querySelector('td.name span.arrow#rules');
+
+            document.querySelector('tr.stock#about').onclick = function() {
+                if(aboutFlag == false) {
+                    aboutArrowSpan.innerHTML = '&#8963;';
+                    aboutItem.style.display = 'table-row';
+                    aboutFlag = true;
+                }
+                else {
+                    aboutArrowSpan.innerHTML = '&#8964;';
+                    aboutItem.style.display = 'none';
+                    aboutFlag = false;
+                }
+            };
+
+            document.querySelector('tr.stock#rules').onclick = function() {
+                if(rulesFlag == false) {
+                    rulesArrowSpan.innerHTML = '&#8963';
+                    rulesItem.style.display = 'table-row';
+                    rulesFlag = true;
+                }
+                else {
+                    rulesArrowSpan.innerHTML = '&#8964';
+                    rulesItem.style.display = 'none';
+                    rulesFlag = false;
+                }
+            };
+        </script>
 <?php include('foot.php'); ?>
diff --git a/base.css b/base.css
@@ -85,8 +85,8 @@ a.tabitem {
 table.view {
     font-family: 'Helvetica Neue';
     font-weight: 300;
-    margin-top: 20vh;
-    margin-bottom: 20vh;
+    margin-top: 22vh;
+    margin-bottom: 22vh;
     width: 100%;
     margin-left: 0;
     margin-right: 0;
@@ -105,6 +105,10 @@ table.view tr.stock {
     background-color: #fff;
     cursor: pointer;
 }
+table.view tr.news {
+    color: #000;
+    background-color: #fff;
+}
 table.view td {
     padding-left: 1vw;
     padding-bottom: 2vh;
@@ -121,6 +125,31 @@ table.view td.sector{
 table.view td.copyright {
     text-transform: none;
 }
+table.view span.arrow {
+
+}
+a.author {
+    color: inherit;
+    text-decoration: underline;
+}
+a.author:hover {
+    text-decoration: none;
+}
+table.view td.time {
+    display: block;
+    font-size: 0.7em;
+    margin: 0;
+    padding 0;
+    padding-top: 2vh;
+    padding-left: 5vw;
+    color: #777;
+}
+table.view td.news {
+    display: block;
+    margin: 0;
+    padding-top: 0;
+    padding-left: 2.5vw;
+}
 table.view td.name {
     padding-left: 3vw;
 }

diff --git a/foot.php b/foot.php
@@ -1,7 +1,7 @@
 </body>
     <script>
         var uri = '<?php echo $_SERVER['SCRIPT_NAME']; ?>';
-        uri = uri.substring(1);
+        uri = uri.substring(uri.lastIndexOf('/') + 1);
         var li = document.querySelector('a[href="' + uri + '"] li');
         li.setAttribute('id', "selected");
     </script>

diff --git a/news.php b/news.php
@@ -1,2 +1,7 @@
 <?php include('head.php'); ?>
+    <table class="view">
+            <tr class="news"><td class="time">18/08/2017 17:35:53</td><td class="news">We'll be providing you all the updates, live changes to the prices of securities, commodities and crypto-currencies by this web app itself.</td></tr>
+            <tr class="news"><td class="time">17/08/2017 17:35:53</td><td class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum dolores ex facilis eum excepturi. Accusantium rem repellat fugit nesciunt pariatur eum itaque odio minima autem, aperiam, eligendi quidem labore nam.</td></tr>
+            <tr class="news"><td class="time">16/08/2017 17:35:53</td><td class="news">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum dolores ex facilis eum excepturi. Accusantium rem repellat fugit nesciunt pariatur eum itaque odio minima autem, aperiam, eligendi quidem labore nam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit consequatur, facere necessitatibus, officia, molestias facilis cumque placeat molestiae aut provident quos deserunt! Impedit est accusantium nisi itaque eos, molestias autem.</td></tr>
+    </table>
 <?php include('foot.php'); ?>