batch 1 of Aki's style suggestions

css/detail.css

@@ -116,6 +116,10 @@
   margin-left: 0px;
   margin-right: 0px;
 }
+.side-margins-15 {
+  margin-left: 15px;
+  margin-right: 15px;
+}
 
 .float-right {
   float: right;
@@ -130,3 +134,15 @@
 .drawer-input-col {
   padding
 }
+
+.name-header {
+  word-wrap: break-word;
+  color: #3d3d3d;
+  margin-bottom: 5px;
+}
+
+.desc-header {
+  word-wrap: break-word;
+  color: #b1b1b1;
+  margin-top: 5px;
+}

css/projects.css

@@ -0,0 +1,3 @@
+.card-title {
+  word-wrap: break-word;
+}

index.html

@@ -16,6 +16,7 @@
     <link href="css/columns.css" rel="stylesheet">
     <link href="css/home.css" rel="stylesheet">
     <link href="css/detail.css" rel="stylesheet">
+    <link href="css/projects.css" rel="stylesheet">
 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 

js/detail.js

@@ -413,9 +413,9 @@ function insertErrorTemplate(error, id) {
 function loadHeader(project) {
   	template = [
 		"<div class='col-md-6 col-xs-8'>",
-	    	"<h1 id='name-header' class='my-4' style='word-wrap:break-word; color: #3d3d3d'>{{displayName}}</h1>",
-			"<h4 style='word-wrap:break-word; color: #b1b1b1'>{{projDesc}}</h4>",
-			"<div class='btn btn-primary btn-md' id='toggledetail'>",
+	    	"<h1 id='name-header' class='my-4 name-header'>{{displayName}}</h1>",
+			"<h4 class='desc-header'>{{projDesc}}</h4>",
+			"<div class='btn btn-primary btn-md' style='margin-left: 10px;' id='toggledetail'>",
 				"View Trends",
 			"</div>",
 		"</div>",
@@ -424,14 +424,14 @@ function loadHeader(project) {
 				"<i class='material-icons'>file_download</i>",
 			"</button>",
 			'<br>',
-			"<button type='' class='btn btn-danger float-right mb-2 command-buttons' data-toggle='tooltip' data-placement='left' title='Delete Project' style='border-color:#ff0099; background-color: #ff0099; color=white;' id='delete{{projName}}'>",
-				"<i class='material-icons'>delete</i>",
-			"</button>",
-			"<br>",
 			"<button type='' id='upload{{projName}}' class='btn btn-primary float-right mb-2 command-buttons' data-toggle='tooltip' data-placement='left' title='Add New Image' style='border-color: #0d77e2; background-color: #0d77e2; color: white'>",
 				"<i class='material-icons'>add</i>",
 			"</button>",
 			"<br>",
+			"<button type='' class='btn btn-danger float-right mb-2 command-buttons' data-toggle='tooltip' data-placement='left' title='Delete Project' style='border-color:#ff0099; background-color: #ff0099; color=white;' id='delete{{projName}}'>",
+				"<i class='material-icons'>delete</i>",
+			"</button>",
+			"<br>",
 		"</div>",
 		"<div id='project-name' hidden=true>{{projName}}</div>",
     ].join("\n");

js/projects.js

@@ -11,7 +11,7 @@ function showProject(name, desc, imgsrc) {
   template = [
     "<div class='col-lg-4 col-xs-6 portfolio-item'>",
       "<div class='card h-100'>",
-        "<a id='photo-{{name}}' href='#'><img style='width: 100%; height: 30vw; object-fit: cover' class='card-img-top img-responsive' src='{{imgsrc}}' alt=''></a>",
+        "<a id='photo-{{name}}' href='#'><img style='width: 100%; height: 30vw; object-fit: cover' class='card-img-top img-responsive' src='{{imgsrc}}' alt='No images in this project yet.'></a>",
         "<div class='card-block well' style='border-radius: 0px'>",
           "<h4 class='card-title'>",
             "<a style='padding: 0px; margin: -10px; color: #3d3d3d' id='link-{{name}}' href='#'>{{displayName}}</a>",

package.json

@@ -7,7 +7,8 @@
   "scripts": {
     "start": "electron .",
     "postinstall": "install-app-deps",
-    "rebuild": "electron-rebuild -f -w sqlite3"
+    "rebuild": "electron-rebuild -f -w sqlite3",
+    "dist": "build"
   },
   "productName": "Archer Meta",
   "repository": "https://github.com/venkatvarsha/archer-hrc-metadata",

sections/projects.html

@@ -1,6 +1,6 @@
 <template class="section-template">
 <section id="projects" class="wrapper style1 fullscreen intro">
-  <div class="row no-side-margins">
+  <div class="row side-margins-15">
     <h1 style="color: #3d3d3d; margin-left:5px;">My Projects</h1>
     <div id='projects-body' class="row no-side-margins"></div>
   </div>