From 93c311af529ddc8672e67c3016f3513d02515432 Mon Sep 17 00:00:00 2001 From: RonNagata_Jr Date: Mon, 14 Jan 2019 18:40:11 -1000 Subject: [PATCH 1/3] Basic Functionality Changes made to style.css and index.html. --- css/style.css | 154 ++++++++++++++++++++++++++++++++++++++++ index.html | 191 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 341 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29b..2de84216 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,154 @@ +h1{ + color: white; + background-color: blue; + padding: 8px; + font-family: "Arial Black", Gadget, sans-serif; + font-size: 50px; + font-variant: small-caps; + margin: 0px; +} +h3{ + padding: 0px; +} + +h4{ + display: inline-block; + margin-top: 0px; + margin-bottom: 0px; +} + +th{ + + text-align: center; + font-family: "Arial", Gadget, sans-serif; + font-weight: normal; + font-style: normal; + font-variant: small-caps; +} + +#dateHeader{ + width:15%; + padding: 10px; + text-align: left; +} + +#senderHeader{ + width:20%; + padding: 10px; + text-align: left; +} + +#subjectHeader{ + width:65%; + padding: 10px; + text-align: left; +} + +#bottomRow{ + margin: 0px; + width: 100%; +} + + +#messageList{ + background-color: PowderBlue; + width: 100% +} + +#messageCell:{ + text-align: center; + background-color: PowerBlue; + padding: 0px; +} + +#messageButton{ + width: 100%; + height: 100%; + border: none; + border-radius: 4px; + background-color: white; + padding: 10px; + transition-duration: 0.2s; + cursor: pointer; + +} + +#messageButton:hover { + background-color: navy; + color: white; +} + +#messageButtonDate{ + width: 15%; + background-color: transparent; + text-align: left; +} + +#messageButtonSender{ + width: 20%; + text-align: left; +} + +#messageButtonSubject{ + width: 65%; + text-align: left; +} + +#deleteCell{ + text-align: center; + background-color: PowderBlue; + padding: 0px; +} + +#deleteButton{ + width: 100%; + height: 100%; + border: none; + border-radius: 4px; + background-color: white; + padding: 10px; + transition-duration: 0.2s; + cursor: pointer; +} + +#deleteButton:hover{ + background-color: navy; + color: white; +} + +#deleteButtonText{ + background-color: transparent; + text-align: center; + font-variant: small-caps; +} + +.column{ + width: 100%; + float: right; +} + +.nav{ + width: 20%; + height: 100%; + background-color: PowderBlue; +} + +.view{ + width: 80%; + height: 100%; +} + +#inboxLabel{ + display:inline-block; + margin-left: 20px; + margin-right:10px; +} + +#inboxCount{ + display:inline-block; + margin-left: 20px; + margin-right: 10px; +} + + + diff --git a/index.html b/index.html index a8a1aad9..932fc86c 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,201 @@ +
- Build Me! + +
+
+ +
+
+
+ +
+ +

+
+
\ No newline at end of file From fe0933ba97a39dc25091bf023ffca26cbdc5921b Mon Sep 17 00:00:00 2001 From: RonNagata_Jr Date: Tue, 22 Jan 2019 19:52:59 -1000 Subject: [PATCH 2/3] Refactoring and Additional Functions --- css/style.css | 187 ++++++++++++------------- index.html | 374 ++++++++++++++++++++++++++++---------------------- 2 files changed, 294 insertions(+), 267 deletions(-) diff --git a/css/style.css b/css/style.css index 2de84216..84e63d7d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,6 @@ +/* "." or full stop for class +*/ + h1{ color: white; background-color: blue; @@ -7,148 +10,132 @@ h1{ font-variant: small-caps; margin: 0px; } -h3{ - padding: 0px; -} -h4{ - display: inline-block; - margin-top: 0px; - margin-bottom: 0px; -} - -th{ - - text-align: center; +h2 { + margin-top: 10px; + margin-left: 20px; + margin-bottom: 10px; font-family: "Arial", Gadget, sans-serif; - font-weight: normal; - font-style: normal; font-variant: small-caps; } -#dateHeader{ - width:15%; - padding: 10px; - text-align: left; -} - -#senderHeader{ - width:20%; - padding: 10px; - text-align: left; -} - -#subjectHeader{ - width:65%; - padding: 10px; - text-align: left; +h3{ + margin-top: 10px; + margin-left: 20px; + margin-bottom: 10px; + font-family: "Arial", Gadget, sans-serif; + font-variant: small-caps; } -#bottomRow{ - margin: 0px; - width: 100%; +h4{ + margin-top: 10px; + margin-left: 20px; + margin-bottom: 10px; + font-family: "Arial", Gadget, sans-serif; + font-variant: small-caps; } - -#messageList{ - background-color: PowderBlue; +table{ + border-spacing: 0px; + background-color: transparent; width: 100% } -#messageCell:{ - text-align: center; - background-color: PowerBlue; - padding: 0px; -} +tr { -#messageButton{ - width: 100%; - height: 100%; - border: none; - border-radius: 4px; - background-color: white; - padding: 10px; - transition-duration: 0.2s; - cursor: pointer; - } -#messageButton:hover { +tr:hover{ background-color: navy; color: white; } -#messageButtonDate{ - width: 15%; - background-color: transparent; +th{ text-align: left; + font-family: "Arial", Gadget, sans-serif; + font-weight: bold; + font-style: normal; + font-variant: small-caps; + font-size: 20px; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 5px; + border-bottom-style: solid; + border-bottom-width: 2px; + border-bottom-color: black; } -#messageButtonSender{ - width: 20%; - text-align: left; +#select_header{ + text-align: center; } -#messageButtonSubject{ - width: 65%; - text-align: left; +td{ + font-family: "Arial", Gadget, sans-serif; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 15px; + border-bottom-style: solid; + border-bottom-width: 2px; + border-bottom-color: gray; } -#deleteCell{ +.delete_cell{ text-align: center; - background-color: PowderBlue; padding: 0px; } -#deleteButton{ - width: 100%; +.container{ + display: grid; + grid-template-columns: 200px auto; + background-color: WhiteSmoke; + margin: 0px; height: 100%; - border: none; - border-radius: 4px; - background-color: white; - padding: 10px; - transition-duration: 0.2s; - cursor: pointer; -} - -#deleteButton:hover{ - background-color: navy; - color: white; } -#deleteButtonText{ - background-color: transparent; - text-align: center; - font-variant: small-caps; +#banner { + grid-column: 1 / span 2; } -.column{ - width: 100%; - float: right; +#navigation{ + grid-column: 1 + padding-top: 10px; + border-right: solid; + border-color: #00FFFF; + text-align: left; } -.nav{ - width: 20%; - height: 100%; - background-color: PowderBlue; +#panel{ + grid-column: 2; + overflow: hidden; } -.view{ - width: 80%; - height: 100%; +.navigation_button{ + display: grid; + grid-template-columns: auto auto; + width: 95%; + text-align: left; + border-style: solid; + border-color: #E0FFFF; + border-radius: 0px 10px 10px 0px; + background-color: #E0FFFF; + font-size: 16px; + padding-left: 12px; + transition-duration: 0.2s; + margin-bottom: 10px; + cursor: pointer; } -#inboxLabel{ - display:inline-block; - margin-left: 20px; - margin-right:10px; +.navigation_button:hover{ + border-color: white; + background-color: white; + color: black; } -#inboxCount{ - display:inline-block; - margin-left: 20px; - margin-right: 10px; +.nav_count{ + display: inline; + text-align: right; } - - +.message_body{ + background-color: white; +} \ No newline at end of file diff --git a/index.html b/index.html index 932fc86c..a402a46d 100644 --- a/index.html +++ b/index.html @@ -6,196 +6,236 @@
-