Merge pull request #23 from TableauSig/main

Siggy RomanEmpire

SiggyRomanEmbedded/SiggyRomanEmbedded.txt

@@ -0,0 +1 @@
+{"color---templates/grid/index.html---Button-Text-Hover":"#FFFFFF","askdata---templates/grid/index.html-3":"","webedit---templates/grid/index.html-0":"false","color---templates/grid/index.html---Button-Background":"#E91E63F2","text---templates/grid/index.html-Download-Data-text":"Download%20Data%20","text---templates/grid/index.html-Viz-4-text":"Viz%204%20","warnings---templates/grid/index.html-0":"false","warnings---templates/grid/index.html-1":"false","color---templates/grid/index.html---Button-Text":"#FFFFFF","color---templates/grid/index.html---Content-Background":"#FFFFFF","text---templates/grid/index.html-Reset-Viz-text":"Reset%20Viz%20","text---templates/grid/index.html-Filter-text-Empr Group":"Empr%20Group","text---templates/grid/index.html-AskData-text":"Ask%20data%20","WARN":"agree","color---templates/grid/index.html---Header-Background":"#F44336","action---templates/grid/index.html-3":"false","action---templates/grid/index.html-0":"false","color---templates/grid/index.html---Header-Text":"#FFFFFF","askdata---templates/grid/index.html-1":"","webedit---templates/grid/index.html-1":"false","TOKEN_NAME":"","view---templates/grid/index.html-view":"https://public.tableau.com/views/RomanEmpireEstablishment79BC-117AD/RomanEmpire?:showVizHome=no&:embed=true,https://public.tableau.com/views/RomanEmpireTimeline/RomanTimeline?:showVizHome=no&:embed=true,,","SITE_NAME":"","color---templates/grid/index.html---Footer-Background":"#00A551","warnings---templates/grid/index.html-3":"false","color---templates/grid/index.html---Footer-Text":"#FFFFFF","text---templates/grid/index.html-Viz-2-text":"RomanTimeline","askdata---templates/grid/index.html-2":"","color---templates/grid/index.html---Content-Text":"#FFFFFF","text---templates/grid/index.html-WebEdit-text":"Web%20Edit%20","lastpageloaded-grid":"0","warnings---templates/grid/index.html-2":"false","text---templates/grid/index.html-User-text":"User%20","webedit---templates/grid/index.html-3":"false","color---templates/grid/index.html---Button-Background-Hover":"#ff6d02","text---templates/grid/index.html-Viz-3-text":"Viz%203%20","askdata---templates/grid/index.html-0":"","filter---templates/grid/index.html-filter":"[[],[],[],[]]","TOKEN_VALUE":"","parameter---templates/grid/index.html-parameter":"[['Year','Empr Group'],[],[],[]]","SERVER_URL":"","text---templates/grid/index.html-Terms-text":"Terms%20%26%20Conditions%20","img---templates/grid/index.html-img-logo":"https://tab-se.github.io/demobuilderportals/assets/TABlogo_wht.png","img---templates/grid/index.html-img-avatar":"https://tab-se.github.io/demobuilderportals/assets/user_avatar.png","text---templates/grid/index.html-PrivacyPolicy-text":"Privacy%20Policy%20","webedit---templates/grid/index.html-2":"false","action---templates/grid/index.html-2":"false","text---templates/grid/index.html-Viz-1-text":"Viz%201","action---templates/grid/index.html-1":"false","text---templates/grid/index.html-Action-text":"Action%20","color---templates/grid/index.html---Body-Background":"#FFFFFF","VERSION":"1.02","text---templates/grid/index.html-Filter-text-Year":"Year"}

SiggyRomanEmbedded/css/config.css

@@ -0,0 +1,13 @@
+:root {
+--Button-Text-Hover:#FFFFFF;
+--Button-Background:#E91E63F2;
+--Button-Text:#FFFFFF;
+--Content-Background:#FFFFFF;
+--Header-Background:#F44336;
+--Header-Text:#FFFFFF;
+--Footer-Background:#00A551;
+--Footer-Text:#FFFFFF;
+--Content-Text:#FFFFFF;
+--Button-Background-Hover:#ff6d02;
+--Body-Background:#FFFFFF;
+}

SiggyRomanEmbedded/css/layout.css

@@ -0,0 +1,119 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: sans-serif;
+}
+
+.header_right {
+  display: flex;
+  line-height: 25px;
+}
+
+.grid-container {
+  min-height: 100%;
+  display: grid;
+  grid-template-columns: 0.1fr 2.8fr 0.1fr;
+  grid-template-rows: 0.08fr 0.04fr auto 0.03fr;
+  gap: 0px 0px;
+  grid-template-areas: "Header Header Header" "ButtonBar ButtonBar ButtonBar" "LeftPad MainContent RightPad" "Footer Footer Footer";
+}
+
+.ButtonBar {
+  grid-area: ButtonBar;
+}
+
+.Footer {
+  grid-area: Footer;
+}
+
+.Header {
+  grid-area: Header;
+}
+
+.Content {
+  grid-area: MainContent;
+}
+
+.LeftPad {
+  grid-area: LeftPad;
+}
+
+.RightPad {
+  grid-area: RightPad;
+}
+
+.Header {
+  background-color: var(--Header-Background);
+  color: var(--Header-Text);
+  padding-top: 2px;
+  padding-left: 2px;
+  padding-bottom: 2px;
+}
+
+.ButtonBar {
+  background-color: var(--Button-Background);
+  color: var(--Button-Text);
+}
+
+.Footer {
+  background-color: var(--Footer-Background);
+  color: var(--Footer-Text);
+  padding-right: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.Content {
+  background-color: var(--Content-Background);
+  color: var(--Content-Text);
+  margin-top: 10px;
+}
+
+.log {
+  max-height: 50px;
+  width: auto;
+  margin: 10px;
+}
+
+.logo {
+  width: 100%;
+  height: 100%;
+  color: var(--Header-Text);
+  display: flex;
+  align-items: center;
+}
+
+.person {
+  margin: auto 20px auto auto;
+}
+
+.tandc {
+  text-align: center;
+  align-items: center;
+  color: #ffffff;
+}
+
+.footer>ul>li {
+  display: inline;
+  margin-left: 30px;
+  color: var(--Footer-Text);
+}
+
+.footer>ul {
+  margin: 0px;
+  width: 100%;
+  text-align: right;
+}
+
+.footer {
+  margin-top: 20px;
+  height: 40px;
+}
+
+@media (max-width: 800px) {
+  .editable {
+    font-size: 0px;
+  }
+}

SiggyRomanEmbedded/css/page.css

@@ -0,0 +1,91 @@
+
+
+.ButtonBar { 
+  overflow: hidden;
+  display: flex;
+  font-family: Arial, Helvetica, sans-serif;
+  min-height: 35px;
+  max-height: 35px;
+  white-space: nowrap;
+} 
+
+.ButtonBar a:not(.filter-entry) {
+  display: inline-flex;
+  font-size: 16px;
+  color: var(--Button-Text);
+  text-align: center;
+  padding-right:10px;
+  padding-left:10px;
+  height: 25px;
+  text-decoration: none;
+  padding-top: 10px;
+  min-width: 10px;
+}
+#tableauViz{
+  position: relative;
+}
+.public-hide-toolbar {
+  position: absolute;
+  bottom: 0px;
+  height: 27px;
+  width: 100%;
+  background-color: var(--Body-Background);
+  display: none;
+}
+.ButtonBar a{
+  transition: all 0.5s;
+}
+.ButtonBar a:hover {
+  background-color: var(--Button-Background-Hover);
+  color: var(--Button-Text-Hover);
+}
+
+html,body{
+  background-color: var(--Body-Background);
+}
+.divider{
+  margin-top: 8px;
+  color:var(--Button-Text);
+}
+.show {
+  display: block!important;
+}
+.filter-container {
+  display: flex;
+}
+.fa{
+  margin-right: 4px;
+}
+.dropdown {
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  background-color: var(--Button-Background);
+  z-index: 1;
+  max-height: 80%;
+  overflow: auto;
+}
+
+/* Links inside the filter dropdown */
+.dropdown-content a {
+  color: var(--Button-Text);
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.divider.generic{
+  display: block;;
+}
+.usrpic {
+  height: 25px;
+  margin-right: 10px;
+}
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: var(--Button-Background-Hover)}
+

SiggyRomanEmbedded/index.html

@@ -0,0 +1,109 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="css/config.css" />
+    <link rel="stylesheet" href="css/layout.css" />
+    <link rel="stylesheet" href="css/page.css" />
+    <!-- <link rel="stylesheet" href="css/all.min.css"> -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <script
+      type="text/javascript"
+      src="https://online.tableau.com/javascripts/api/tableau-2.8.0.min.js"
+    ></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/advanced.js"></script>
+    <script src="tableau.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tableau Example</title>
+  </head>
+  <body onload="loadVizInit()">
+    <div class="grid-container">
+      <div class="LeftPad"></div>
+      <div class="RightPad"></div>
+
+      <div class="Header">
+        <div class="logo">
+          <div>
+            <img
+              id="img-logo"
+              class="log img-editable"
+              src="https://tab-se.github.io/demobuilderportals/assets/TABlogo_wht.png"
+            />
+          </div>
+          <!-- <div id="Brand-Name-text" class="editable">My Brand</div> -->
+          <div class="person">
+            <div class="header_right">
+              <img
+                id="img-avatar"
+                class="usrpic img-editable"
+                src="https://tab-se.github.io/demobuilderportals/assets/user_avatar.png"
+              />
+              <span id="User-text" class="editable">User</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="ButtonBar">
+        <a class="viz" index="1" href="#" onclick="loadVizByIndex(0)"
+          ><i class="fa fa-chart-line"></i>
+          <div id="Viz-1-text" class="editable">Viz 1</div></a
+        >
+        <a class="viz" index="2" href="#" onclick="loadVizByIndex(1)"
+          ><i class="fa fa-chart-line"></i>
+          <div id="Viz-2-text" class="editable">Viz 2</div></a
+        >
+        <a class="viz" index="3" href="#" onclick="loadVizByIndex(2)"
+          ><i class="fa fa-chart-line"></i>
+          <div id="Viz-3-text" class="editable">Viz 3</div></a
+        >
+        <a class="viz" index="4" href="#" onclick="loadVizByIndex(3)"
+          ><i class="fa fa-chart-line"></i>
+          <div id="Viz-4-text" class="editable">Viz 4</div></a
+        >
+
+        <div class="divider">|</div>
+        <div class="filter-container">
+          <a href="#" onclick="resetViz()">
+            <i class="fa fa-undo"></i>
+            <div id="Reset-Viz-text" class="editable">Reset Viz</div></a
+          >
+        </div>
+        <div class="divider">|</div>
+
+        <a href="#" onclick="dataDownload()"
+          ><i class="fa fa-file-download"></i>
+          <div id="Download-Data-text" class="editable">Download Data</div></a
+        >
+        <a class="webedit" href="#" onclick="launchEdit()"
+          ><i class="fa fa-pencil-ruler"></i>
+          <div id="WebEdit-text" class="editable">Web Edit</div></a
+        >
+        <a class="askdata" href="#" onclick="launchAsk()"
+          ><i class="fa fa-comment-dots"></i>
+          <div id="AskData-text" class="editable">Ask data</div></a
+        >
+        <a class="action" href="#" onclick="launchAction()"
+          ><i class="fa fa-clipboard"></i>
+          <div id="Action-text" class="editable">Action</div></a
+        >
+      </div>
+
+      <div class="Content">
+        <div id="tableauViz"></div>
+      </div>
+
+      <div class="Footer">
+        <ul>
+          <li class="editable" id="Terms-text">Terms & Conditions</li>
+          <li id="PrivacyPolicy-text" class="editable">Privacy Policy</li>
+        </ul>
+      </div>
+    </div>
+  </body>
+</html>