daydream

commit 1ec791c78d3892b5e9815357761cf9da049d8dd0
parent e2c625f040dd5ea01b0431d83958b53dbb89abe7
Author: Marcel <mtrnord1@gmail.com>
Date:   Sat, 11 Jul 2020 21:33:46 +0200

Start working on input and fix room-title shadow

Took 5 minutes

Diffstat:
M
src/app/components/input.rs
 | 
9
++++++---
M
static/custom-css.scss
 | 
64
++++++++++++++++++++++++++++++++++++++++++++++++++++++----------

2 files changed, 60 insertions(+), 13 deletions(-)
diff --git a/src/app/components/input.rs b/src/app/components/input.rs
@@ -61,9 +61,12 @@ impl Component for Input {
 
     fn view(&self) -> Html {
         html! {
-            <div class="uk-inline message-input">
-                <span class="material-icons" id="ma-icon">{"create"}</span>
-                <input class="uk-input" type="text"
+            <div class="message-input">
+                <div class="encryption-bg">
+                    <span class="material-icons">{"lock_open"}</span>
+                </div>
+                <textarea autofocus=true
+                    placeholder={"Input Text..."}
                     value=&self.state.value.as_deref().unwrap_or("")
                     oninput=&self.on_input
                     onkeypress=&self.on_submit
diff --git a/static/custom-css.scss b/static/custom-css.scss
@@ -342,7 +342,7 @@ body {
   height: 37.5rem;
 
   img {
-    max-height:100%;
+    max-height: 100%;
     max-width: 100%;
   }
 }
@@ -350,19 +350,19 @@ body {
 .room-title {
   width: 100%;
   overflow: hidden;
-  padding-bottom: 2.5rem;
-  flex: 0 1 5.875rem;
+  //padding-bottom: 2.5rem;
+  flex: 0 1 7.875rem;
+  box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
+  -moz-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
+  margin-bottom: 0.3125rem;
 
   div {
     width: 100%;
     height: 100%;
-
-    box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
-    -moz-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
-    -webkit-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
-
     padding-left: 9.375rem;
     padding-top: 1.1875rem;
+
     h1 {
       font-family: Roboto, sans-serif;
       font-style: normal;
@@ -376,11 +376,55 @@ body {
 
 .message-input {
   flex: 0 1 4.375rem;
-  display: block !important;
-  padding-right: 40px;
+  display: flex;
+  flex-direction: row;
+
   border-top: 2px solid #4D4D4D;
+
+  .encryption-bg {
+    background: #EB9C00;
+    width: 42px;
+    height: 42px;
+    margin: 14px 67px 14px 48px;
+
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 10px 20px rgba(0, 0, 0, 0.04);
+
+    border-radius: 50%;
+
+    span {
+      margin: 9px;
+    }
+  }
+
+  // Move placeholder
+  textarea::placeholder {
+    font-family: Roboto, sans-serif;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 18px;
+    line-height: 21px;
+    /* identical to box height */
+
+    display: flex;
+    align-items: center;
+  }
+
+  textarea {
+    flex-grow: 1;
+    //background-color: #f5f5f5;
+    // Reset
+    border: 0;
+    &:focus {
+      outline: 0;
+    }
+
+
+
+  }
 }
 
+
+
 .message-scrollarea {
   flex: 1 1 auto;
 }