stacks-archive · zone117x · Aug 25, 2019 · Aug 25, 2019
diff --git a/test/app.js b/test/app.js
@@ -100,7 +100,6 @@ describe('generator-blockstack:webpack', function () {
       'dist/index.html',
       'dist/manifest.json',
       'dist/robots.txt',
-      'dist/bootstrap.min.css',
       'dist/avatar-placeholder.png',
       'dist/favicon.ico',
       'dist/white-logo.svg'

diff --git a/webpack/index.js b/webpack/index.js
@@ -9,7 +9,7 @@ class BlockstackWebpackGenerator extends Generator {
     // Calling the super constructor is important so our generator is correctly set up
     super(args, opts);
   }
-  
+
   prompting() {
     // Have Yeoman greet the user.
     this.log(yosay(
@@ -59,10 +59,6 @@ class BlockstackWebpackGenerator extends Generator {
       this.templatePath('dist/app.css'),
       this.destinationPath('dist/app.css')
     );
-    this.fs.copy(
-      this.templatePath('dist/bootstrap.min.css'),
-      this.destinationPath('dist/bootstrap.min.css')
-    );
     // images
     this.fs.copy(
       this.templatePath('dist/avatar-placeholder.png'),

diff --git a/webpack/templates/_package.json b/webpack/templates/_package.json
@@ -14,6 +14,6 @@
     "webpack-dev-server": "^3.5.1"
   },
   "dependencies": {
-    "blockstack": "^19.2.5"
+    "blockstack": "github:blockstack/blockstack.js#feature/file-api-additions"
   }
 }
diff --git a/webpack/templates/dist/app.css b/webpack/templates/dist/app.css
@@ -1,17 +1,24 @@
 /* Globals */
 a,a:focus,a:hover{color:#fff;}
-html,body{height:100%;background-color:#F4F4FC;}
-body{color:#3700FF;text-align:center;}
+html,body{background-color:#F4F4FC;height:100%;}
+.panel-landing,.panel-welcome{color:#3700FF;}
+.container{min-height:90vh;}
 .hide{display:none;}
 .landing-heading{font-family:'Source Code Pro',monospace;font-weight:400;}
+.highlight-drag{filter:sepia(0.2);transition-duration:0.2s;}
 
 /* Buttons */
-.btn{font-family:'Source Code Pro',monospace;padding:0.5625rem 2.5rem;font-size:0.8125rem;font-weight:400;line-height:1.75rem;border-radius:0!important;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
-.btn-lg{font-size:0.875rem;padding:0.6875rem 3.4375rem;line-height:1.75rem;}
-.btn:focus,.btn:active:focus,.btn.active:focus{outline:none;}
-.btn-primary{background-color:#3700FF;border:1px solid #3700FF;}
-.btn-primary:hover,.btn-primary:focus,.btn-primary:active{color:#fff;border:1px solid #270F34;background-color:#270F34;}
+.auth-btn{font-family:'Source Code Pro',monospace;padding:0.5625rem 2.5rem;font-size:0.8125rem;font-weight:400;line-height:1.75rem;border-radius:0!important;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:0.875rem;padding:0.6875rem 3.4375rem;line-height:1.75rem;background-color:#3700FF;border:1px solid #3700FF;}
+.auth-btn:focus,.auth-btn:active:focus,.auth-btn.active:focus{outline:none;}
+.auth-btn:hover,.auth-btn:focus,.auth-btn:active{color:#fff;border:1px solid #270F34;background-color:#270F34;}
 .navbar{background-color:#3700FF;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;}
+.custom-file{width:14rem;}
+.custom-file-label{text-align:left;padding-left:0.75rem;}
+
+/* Cards */
+#image-cards{flex-flow:row wrap;}
+.card{min-width:15rem;max-width:15rem;margin-bottom:15px !important;}
+.loading-spinner{margin:3rem;}
 
 /* Avatar */
 .avatar{width:100px;height:100px;}
@@ -23,4 +30,4 @@ body{color:#3700FF;text-align:center;}
 .panel-authed{padding:0 0 0 0;}
 
 /* Home button */
-.btn-home-hello{position:absolute;font-family:'Source Code Pro',monospace;font-size:11px;font-weight:400;color:rgba(255,255,255,0.85);top:15px;left:15px;padding:3px 20px;background-color:rgba(255,255,255,0.15);border-radius:6px;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);}
+.btn-home-hello{position:absolute;font-family:'Source Code Pro',monospace;font-size:11px;font-weight:400;color:rgba(255,255,255,0.85);top:15px;left:15px;padding:3px 20px;background-color:rgba(255,255,255,0.15);border-radius:6px;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);}
diff --git a/webpack/templates/dist/bootstrap.min.css b/webpack/templates/dist/bootstrap.min.css
diff --git a/webpack/templates/dist/index.html b/webpack/templates/dist/index.html
@@ -1,37 +1,104 @@
 <!doctype html>
-<html>
- <head>
-   <title>Hello Blockstack</title>
-   <link rel="icon" type="image/x-icon" href="favicon.ico" />
-   <link rel="stylesheet" href="bootstrap.min.css" />
-   <link rel="stylesheet" href="app.css" />
-
-   <!-- Include webpack generated bundle -->
-   <script src="main.js"></script>
- </head>
- <body>
-    <div class="site-wrapper">
-        <div class="site-wrapper-inner">
-          <div class="panel-landing" id="section-1">
-            <h1 class="landing-heading">Hello, Blockstack!</h1>
-            <p class="lead">
-              <a href="#" class="btn btn-primary btn-lg" id="signin-button">
-                Sign In with Blockstack
-              </a>
-            </p>
-          </div>
-          <div class="panel-welcome hide" id="section-2">
-            <div class="avatar-section">
-              <img class="img-rounded avatar" id="avatar-image">
-            </div>
-            <h1>Hello, <span id="heading-name">Anonymous</span>!</h1>
-            <p class="lead">
-              <a href="#" class="btn btn-primary btn-lg" id="signout-button">
-                Logout
-              </a>
-            </p>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  <title>Hello Blockstack</title>
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+  <!-- App css -->
+  <link rel="stylesheet" href="app.css" />
+
+  <!-- Include webpack generated bundle -->
+  <script src="main.js"></script>
+
+</head>
+
+<body class="dropzone">
+  <div class="container d-flex py-5">
+    <div class="align-self-center mx-auto text-center">
+
+      <!-- Signed out page -->
+      <div class="panel-landing" id="section-1">
+        <h1 class="landing-heading">Hello, Blockstack!</h1>
+        <p class="lead">
+          <button type="button" class="btn btn-primary btn-lg auth-btn" id="signin-button">
+            Sign In with Blockstack
+          </button>
+        </p>
+      </div>
+
+      <!-- Signed in page -->
+      <div class="panel-welcome hide" id="section-2">
+        <div class="avatar-section">
+          <img class="img-rounded avatar" id="avatar-image">
+        </div>
+        <h1>Hello, <span id="heading-name">Anonymous</span>!</h1>
+        <p class="lead">
+          <button type="button" class="btn btn-primary btn-lg auth-btn" id="signout-button">
+            Logout
+          </button>
+          <!-- Upload file button -->
+          <div class="custom-file">
+            <input type="file" accept="image/*" class="custom-file-input" id="photo-upload-input">
+            <label class="custom-file-label" for="photo-upload-input">Drop image file</label>
           </div>
+        </p>
+        <!-- Uploaded photo cards -->
+        <div id="image-cards" class="card-deck text-center d-flex justify-content-center">
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-labelledby="error-modal-title"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="error-modal-title">Modal title</h5>
+          <button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+        </div>
+        <div class="modal-footer">
+          <span class="text-secondary font-italic">Check the Developer Console for additional details</span>
+          <button type="button" class="btn btn-secondary close-modal" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Image card template -->
+  <template id="image-card-template">
+    <div class="card">
+      <div class="text-center loading-spinner">
+        <div class="spinner-border" role="status">
+          <span class="sr-only">Loading...</span>
         </div>
       </div>
- </body>
+      <button type="button" class="loading-error btn btn-outline-danger m-3 d-none">Error loading</button>
+      <img class="card-img-top card-image d-none" alt="...">
+      <div class="card-body">
+        <h6 class="card-title text-dark">Card title</h6>
+      </div>
+      <div class="card-footer">
+        <button type="button" class="btn btn-sm btn-outline-secondary delete-button">Delete</button>
+      </div>
+    </div>
+  </template>
+
+</body>
+
 </html>