Modal template

website/src/examples/modal/app.css

@@ -135,3 +135,39 @@ body.avgrund-active {
   top: 6px;
   right: 10px;
 }
+
+
+/* Modal Styles */
+.InputList {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  padding: 0;
+}
+
+.InputList li {
+  margin-bottom: 16px;
+}
+
+.InputList li button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  outline: 0;
+}
+
+.ModalTemplate {
+  display: flex;
+  flex-direction: row;
+}
+
+.UploadSidebar {
+  border-right: 1px solid #ccc;
+  height: 600px;
+  text-align: center;
+}
+
+.UploadContent {
+  height: 600px;
+}

website/src/examples/modal/app.es6

@@ -54,9 +54,9 @@ function activate (e) {
   var popin = document.createElement('div')
   popin.classList.add('avgrund-popin')
   popin.classList.add('ModalWindow')
-
-  popin.innerHTML = defaults.template
-  console.log(defaults.template)
+  var template = '<div class="ModalTemplate"><nav class="UploadSidebar"><ul class="InputList"><li><button>Dropbox</button></li><li><button>Google Drive</button></li><li><button>Instagram</button></li><li><button>Local</button></li><li><button>Webcam</button></li></ul></nav><main class="UploadContent"><button id="DriveConnect">Connect to Drive</button></main></div>'
+  popin.innerHTML = template
+  console.log(template)
 
   var a  = document.createElement('a')
   var linkText = document.createTextNode('close')

website/src/examples/modal/app.html

@@ -1 +1,16 @@
 <button class="ModalTrigger">Launcher</button>
+
+<div class="ModalTemplate">
+  <nav class="UploadSidebar">
+    <ul class="InputList">
+      <li><button>Dropbox</button></li>
+      <li><button>Google Drive</button></li>
+      <li><button>Instagram</button></li>
+      <li><button>Local</button></li>
+      <li><button>Webcam</button></li>
+    </ul>
+  </nav>
+  <main class="UploadContent">
+    <button id="DriveConnect">Connect to Drive</button>
+  </main>
+</div>