updated styling

Bechtel-Innovation-Design-Center · Oct 7, 2021 · d7c7934 · d7c7934
1 parent a3568af
commit d7c7934
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 38 deletions.
diff --git a/Autodesk_Setup_BIDC/setup-sheet.cps b/Autodesk_Setup_BIDC/setup-sheet.cps
@@ -350,11 +350,15 @@ function onOpen() {
   );
   write("<html>");
 
-  write("<script src=https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js></script>");
-	write("<link rel=\"StyleSheet\" href=\"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css\" type=\"text/css\">");
   // header
   var c = "<head>";
   c += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">";
+
+  // Import material io components
+  c += "<link href=\"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css\" rel=\"stylesheet\">";
+  c += "<script src=\"https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js\"></script>";
+  c += "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">";
+
   if (getProperty("embedStylesheet")) {
     c += "<style type=\"text/css\">" + loadText("setup-sheet.css", "utf-8") + "</style>";
   } else {
@@ -415,37 +419,33 @@ function onOpen() {
     write("<h1>" + localize("Setup Sheet") + "</h1>");
   }
 
-	list =
-	"<ul class=\"mdc-list\">\n" +
-		"<li class=\"mdc-list-item\" tabindex=\"0\">\n" +
-			"<span class=\"mdc-list-item__ripple\"></span>\n" +
-			"<span class=\"mdc-list-item__text\">Single-line item</span>\n" +
-		"</li>\n" +
-		"<li class=\"mdc-list-item\">\n" +
-			"<span class=\"mdc-list-item__ripple\"></span>\n" +
-			"<span class=\"mdc-list-item__text\">Single-line item</span>\n" +
-		"</li>\n" +
-		"<li class=\"mdc-list-item\">\n" +
-			"<span class=\"mdc-list-item__ripple\"></span>\n" +
-			"<span class=\"mdc-list-item__text\">Single-line item</span>\n" +
-		"</li>\n" +
-	"</ul>\n"
-
-	write(list);
-
-	card =
-	"<div class=\"mdc-card--outlined\">" +
-  "<button class=\"mdc-button mdc-card__action mdc-card__action--button\">" +
-    "<div class=\"mdc-button__ripple\"></div>" +
-    "<span class=\"mdc-button__label\">Action 1</span>" +
-  "</button>" +
-  "<button class=\"mdc-button mdc-card__action mdc-card__action--button\">" +
-    "<div class=\"mdc-button__ripple\"></div>" +
-    "<span class=\"mdc-button__label\">Action 2</span>" +
-  "</button>" +
-	"</div>"
-
-	write(card);
+	// list =
+	// "<ul class=\"mdc-list\">\n" +
+	// 	"<li class=\"mdc-list-item\" tabindex=\"0\">\n" +
+	// 		"<span class=\"mdc-list-item__ripple\"></span>\n" +
+	// 		"<span class=\"mdc-list-item__text\">Single-line item</span>\n" +
+	// 	"</li>\n" +
+	// 	"<li class=\"mdc-list-item\">\n" +
+	// 		"<span class=\"mdc-list-item__ripple\"></span>\n" +
+	// 		"<span class=\"mdc-list-item__text\">Single-line item</span>\n" +
+	// 	"</li>\n" +
+	// 	"<li class=\"mdc-list-item\">\n" +
+	// 		"<span class=\"mdc-list-item__ripple\"></span>\n" +
+	// 		"<span class=\"mdc-list-item__text\">Single-line item</span>\n" +
+	// 	"</li>\n" +
+	// "</ul>\n"
+
+	// write(list);
+
+	// card =
+	// "<div class=\"mdc-card\">" +
+  //   "<div class=\"mdc-card__content\">" +
+  //     "hello" +
+  //   "</div>" +
+  //     "world" +
+	// "</div>"
+
+	// write(card);
 
   patternIds = {};
   var numberOfSections = getNumberOfSections();

diff --git a/Autodesk_Setup_BIDC/setup-sheet.css b/Autodesk_Setup_BIDC/setup-sheet.css
@@ -34,23 +34,25 @@ table {
   border: none;
   border-spacing: 0;
   background-color: white;
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+  border-radius: 8px;
 }
 
 table.jobhead {
   width: fit-content;
-  border: medium solid Black;
+  border-radius: 8px;
   display: flex;
 }
 
 table.job, table.sheet {
   width: fit-content;
-  border: medium solid Black;
+  border-radius: 8px;
   display: flex;
 }
 
 th {
   background-color: #e0e0e0;
-  border-bottom: medium solid Black;
+  border-radius: 8px;
   padding: 0.7rem;
 }
 
@@ -62,6 +64,7 @@ tr.space td {
 
 table.info {
   padding-top: 0.1cm;
+  box-shadow: none;
 }
 
 table.info td {
@@ -73,8 +76,8 @@ table.info td {
 }
 
 .model img {
-  width: 12cm;
-  border: 2px solid Black;
+  width: 100%;
+  max-width: 60rem;
 }
 
 .preview img {