Projects/grzegorz-clients
Projects
/
grzegorz-clients
7
1
Fork 0
Code Issues 1 Pull Requests 1 Wiki Activity

Make redesign more reactive

This commit is contained in:
Peder Bergebakken Sundt 2018-06-02 13:33:35 +02:00
parent 9ea538ba82
commit 4dfa7a87a3
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
grzegorz_clients/remi_ui.py
View File

@ -7,7 +7,7 @@ from . import api
from .constants import * from .constants import *
#globals: #globals:
WIDTH_L = 480 WIDTH_L = 400
WIDTH_R = 512 WIDTH_R = 512
WIDTH = WIDTH_L + 40 + WIDTH_R WIDTH = WIDTH_L + 40 + WIDTH_R
@ -63,7 +63,7 @@ class RemiApp(App):
def make_gui_container(self):#placement and styling def make_gui_container(self):#placement and styling
# Logo image: # Logo image:
self.logo_image.style["width"] = f"{WIDTH_L}px" self.logo_image.style["width"] = f"100%"
for i in (self.playback.previous, self.playback.play, self.playback.next): for i in (self.playback.previous, self.playback.play, self.playback.next):
i.style["margin"] = "3px" i.style["margin"] = "3px"
i.style["width"] = "2.8em" i.style["width"] = "2.8em"
@ -104,11 +104,18 @@ class RemiApp(App):
self.input.field.style["margin"] = "5px" self.input.field.style["margin"] = "5px"
self.input.field.style["border"] = "1px solid %s" % COLOR_BLUE self.input.field.style["border"] = "1px solid %s" % COLOR_BLUE
self.input.field.style["box-shadow"] = "0px 0px 5px 0px %s" % COLOR_BLUE_SHADOW self.input.field.style["box-shadow"] = "0px 0px 5px 0px %s" % COLOR_BLUE_SHADOW
self.input.field.style["align-self"] = "flex-start"
self.input.submit.style["margin"] = "5px" self.input.submit.style["margin"] = "0px 5px"
self.input.submit.style["padding"] = "0px 10px"
# Containers: # Containers:
root_container = gui.HBox(width = WIDTH) root_container = gui.HBox()
root_container.style.update({"margin-left": "auto", "margin-right":"auto"})
root_container.style["margin-left"] = "auto"
root_container.style["margin-right"] = "auto"
root_container.style["max-width"] = f"{WIDTH}px"
root_container.style["flex-wrap"] = "wrap"
# LEFT SIDE # LEFT SIDE
left_container = gui.VBox(width=WIDTH_L) left_container = gui.VBox(width=WIDTH_L)
@ -116,8 +123,6 @@ class RemiApp(App):
left_container.style["align-self"] = "flex-start" left_container.style["align-self"] = "flex-start"
root_container.append(left_container) root_container.append(left_container)
root_container.style.update({"margin-left": "auto", "margin-right":"auto"})
left_container.append(self.logo_image) left_container.append(self.logo_image)
left_container.append(self.playback.playing) left_container.append(self.playback.playing)
@ -139,11 +144,15 @@ class RemiApp(App):
# RIGHT SIDE # RIGHT SIDE
right_container = gui.VBox(width=WIDTH_R) right_container = gui.VBox(width=WIDTH_R)
right_container.style["margin-top"] = "0.8em"
right_container.style["align-self"] = "flex-start"
root_container.append(right_container) root_container.append(right_container)
self.input.add_song.style["line-height"] = "1em"
right_container.append(self.input.add_song) right_container.append(self.input.add_song)
input_container = gui.HBox(width="100%") input_container = gui.HBox(width="100%")
input_container.style["margin"] = "0px"
input_container.append(self.input.field) input_container.append(self.input.field)
input_container.append(self.input.submit) input_container.append(self.input.submit)
right_container.append(input_container) right_container.append(input_container)