commit da4405715a7afe80a0a7fa634cd507b64efedc81
parent 99432684f227c10283cf0731dda6f1efb985487c
Author: Marcel <mtrnord1@gmail.com>
Date: Fri, 10 Jul 2020 23:13:04 +0200
Fix room-title, overflow and image thumbnail size
Took 40 minutes
Diffstat:
6 files changed, 60 insertions(+), 32 deletions(-)
diff --git a/src/app/components/event_list.rs b/src/app/components/event_list.rs
@@ -146,8 +146,8 @@ impl Component for EventList {
fn view(&self) -> Html {
return html! {
<div class="event-list">
- <div class="room-title"><h1>{ self.props.current_room.display_name() }</h1></div>
- <div class="scrollable" style="height: auto; flex-grow: 1;">
+ <div class="room-title"><div><h1>{ self.props.current_room.display_name() }</h1></div></div>
+ <div class="scrollable message-scrollarea">
<div class="message-container">
{
if self.state.events.contains_key(&self.props.current_room.room_id) {
diff --git a/src/app/components/events/image.rs b/src/app/components/events/image.rs
@@ -4,6 +4,7 @@ use crate::app::components::events::{EventExt, RoomExt};
use matrix_sdk::{
events::{room::message::ImageMessageEventContent, AnyMessageEventStub},
Room,
+ js_int::UInt
};
use rand::random;
use yew::prelude::*;
@@ -71,7 +72,7 @@ impl Component for Image {
html! {
<div>
<p><displayname>{sender_displayname}{": "}</displayname></p>
- <a href={lightbox_href_full.clone()}><img src=thumbnail/></a>
+ <a href={lightbox_href_full.clone()}><div class="thumbnail-container"><img src=thumbnail/></div></a>
<div class="lightbox short-animate" id={lightbox_id_full.clone()}>
<img class="long-animate" src=image_url/>
</div>
diff --git a/src/app/components/input.rs b/src/app/components/input.rs
@@ -61,7 +61,7 @@ impl Component for Input {
fn view(&self) -> Html {
html! {
- <div class="uk-inline" style="display: block !important; padding-right: 40px;">
+ <div class="uk-inline message-input">
<span class="material-icons" id="ma-icon">{"create"}</span>
<input class="uk-input" type="text"
value=&self.state.value.as_ref().unwrap_or(&"".to_string())
diff --git a/src/app/components/room_list/mod.rs b/src/app/components/room_list/mod.rs
@@ -189,20 +189,22 @@ impl Component for RoomList {
<div class="scrollable list">{rooms}</div>
<div class="bottom-bar">
<div class="toggleWrapper">
- <input type="checkbox" class="dn" id="dn" checked=self.state.dark_theme value=self.state.dark_theme onclick=self.link.callback(|e: MouseEvent| {Msg::ToggleTheme})/>
- <label for="dn" class="toggle">
- <span class="toggle__handler">
- <span class="crater crater--1"></span>
- <span class="crater crater--2"></span>
- <span class="crater crater--3"></span>
- </span>
- <span class="star star--1"></span>
- <span class="star star--2"></span>
- <span class="star star--3"></span>
- <span class="star star--4"></span>
- <span class="star star--5"></span>
- //<span class="star star--6"></span>
- </label>
+ <div>
+ <input type="checkbox" class="dn" id="dn" checked=self.state.dark_theme value=self.state.dark_theme onclick=self.link.callback(|e: MouseEvent| {Msg::ToggleTheme})/>
+ <label for="dn" class="toggle">
+ <span class="toggle__handler">
+ <span class="crater crater--1"></span>
+ <span class="crater crater--2"></span>
+ <span class="crater crater--3"></span>
+ </span>
+ <span class="star star--1"></span>
+ <span class="star star--2"></span>
+ <span class="star star--3"></span>
+ <span class="star star--4"></span>
+ <span class="star star--5"></span>
+ //<span class="star star--6"></span>
+ </label>
+ </div>
</div>
</div>
</div>
diff --git a/static/custom-css.scss b/static/custom-css.scss
@@ -338,21 +338,33 @@ body {
width: 100vw;
}
+.thumbnail-container {
+ height: 37.5rem;
+
+ img {
+ max-height:100%;
+ max-width: 100%;
+ }
+}
+
.room-title {
width: 100%;
- height: 100%;
- max-height: 5.875rem;
-
- //h1 {
- // margin: 0 !important;
- // height: 5.875rem;
- //}
+ overflow: hidden;
+ padding-bottom: 1.625rem;
+ flex: 0 1 5.875rem;
+
+ h1 {
+ font-family: Roboto, sans-serif;
+ font-style: normal;
+ font-weight: bold;
+ font-size: 2.125rem;
+ line-height: 2.5rem;
+ letter-spacing: 0.015625rem;
+ }
- &::before {
- content: '';
- position: absolute;
+ div {
width: 100%;
- height: 5.875rem;
+ height: 5.875rem !important;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
@@ -360,6 +372,16 @@ body {
}
}
+.message-input {
+ flex: 0 1 4.375rem;
+ display: block !important;
+ padding-right: 40px;
+}
+
+.message-scrollarea {
+ flex: 1 1 auto;
+}
+
.event-list {
height: 100%;
display: flex;
@@ -529,7 +551,12 @@ body {
.toggleWrapper {
height: 100%;
// Following later becomes button stuff
- margin: 9px 54px;
+
+ div {
+ position: relative;
+ left: 40%;
+ top: 5%;
+ }
}
}
}
diff --git a/static/theme_slider.scss b/static/theme_slider.scss
@@ -1,6 +1,4 @@
.toggleWrapper {
- position: relative;
- left: 25%;
input {
position: absolute;
