Parcourir la source

proper sizing for chat components

master
f0x il y a 1 mois
Parent
révision
bc0f8e6c54
4 fichiers modifiés avec 19 ajouts et 26 suppressions
  1. 1
    3
      app.js
  2. 4
    6
      components/chat.js
  3. 1
    3
      components/filterList.js
  4. 13
    14
      public/scss/style.scss

+ 1
- 3
app.js Voir le fichier

@@ -85,9 +85,7 @@ let App = create({
85 85
     return (
86 86
       <>
87 87
         <Sidebar client={this.state.client} rooms={this.state.rooms} selectRoom={(roomId) => {this.setState({roomId: roomId})}}/>
88
-        <div className="main">
89
-          <Chat client={this.state.client} roomId={this.state.roomId}/>
90
-        </div>
88
+        <Chat client={this.state.client} roomId={this.state.roomId}/>
91 89
       </>
92 90
     )
93 91
   }

+ 4
- 6
components/chat.js Voir le fichier

@@ -57,9 +57,7 @@ let chat = create({
57 57
 
58 58
   render: function() {
59 59
     let empty = (
60
-      <div className="chat" ref={this.setRef}>
61
-        <div className="events">
62
-        </div>
60
+      <div className="main">
63 61
       </div>
64 62
     )
65 63
     if (this.props.roomId == undefined) {
@@ -106,15 +104,15 @@ let chat = create({
106 104
     }
107 105
     //TODO: replace with something that only renders events in view
108 106
     return (
109
-      <>
107
+      <div className="main">
110 108
         <Info room={room} />
111 109
         <div className="chat" ref={this.setRef}>
112 110
           <div className="events">
113 111
             {events}
114 112
           </div>
115 113
         </div>
116
-        <Input client={this.state.client} roomId={this.state.roomId}/>
117
-      </>
114
+        <Input client={this.props.client} roomId={this.props.roomId}/>
115
+      </div>
118 116
     )
119 117
   }
120 118
 })

+ 1
- 3
components/filterList.js Voir le fichier

@@ -52,9 +52,7 @@ let FilterList = create({
52 52
       return React.createElement(this.props.element, props)
53 53
     })
54 54
     return <>
55
-      <div className="filter">
56
-        <input ref={this.inputRef} placeholder="Search"/>
57
-      </div>
55
+      <input className="filter" ref={this.inputRef} placeholder="Search"/>
58 56
       <div className="list">
59 57
         {items}
60 58
       </div>

+ 13
- 14
public/scss/style.scss Voir le fichier

@@ -183,18 +183,15 @@ body {
183 183
   max-width: 15vw;
184 184
 
185 185
   .filter {
186
+    border: none;
186 187
     border-bottom: $borderwidth solid $bg;
187
-
188
-    input {
189
-      width: 100%;
190
-      box-sizing: border-box;
191
-      padding: $spacing;
192
-      border: none;
193
-      color: white;
194
-      font-size: 1rem;
195
-      margin: 0;
196
-      font-weight: bold;
197
-    }
188
+    width: 100%;
189
+    box-sizing: border-box;
190
+    padding: $spacing;
191
+    color: white;
192
+    font-size: 1rem;
193
+    margin: 0;
194
+    font-weight: bold;
198 195
   }
199 196
 }
200 197
 
@@ -253,14 +250,16 @@ body {
253 250
 .info {
254 251
   padding: $spacing;
255 252
   color: $accent;
253
+  font-size: 1rem;
256 254
   font-weight: bold;
257 255
   border-bottom: $borderwidth solid $bg;
258 256
   box-sizing: border-box;
259 257
 }
260 258
 
261 259
 .chat {
262
-  padding: $spacing;
260
+  padding: 0 $spacing;
263 261
   position: relative;
262
+  box-sizing: border-box;
264 263
 
265 264
   .events {
266 265
     display: flex;
@@ -291,9 +290,9 @@ body {
291 290
         border: 0.2rem solid lighten($bg0, 10);
292 291
 
293 292
         position: sticky;
294
-        top: $spacing/4 - 0.2rem;
293
+        top: $spacing;
295 294
         //align-self: flex-end;
296
-        //bottom: $spacing/4 - 0.2rem;
295
+        //bottom: $spacing;
297 296
       }
298 297
 
299 298
       .col {

Chargement…
Annuler
Enregistrer