From daa1060ce3f953a767b88a1108185a9554d91649 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 22:30:00 +0100
Subject: form styling

---
 frontend/app/views/tile/components/tile.form.js | 108 ++++++++++++++----------
 1 file changed, 62 insertions(+), 46 deletions(-)

(limited to 'frontend/app/views/tile')

diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 3066da3..c2f2f60 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -569,7 +569,7 @@ class TileForm extends Component {
             autoComplete="off"
           />
         </div>
-        <div className='row pair'>
+        <div className='row pair with_checkbox'>
           <Select
             name='video_style'
             selected={temporaryTile.settings.video_style || 'none'}
@@ -589,12 +589,14 @@ class TileForm extends Component {
           <Checkbox
             label="Muted"
             name="muted"
+            className='short'
             checked={temporaryTile.settings.muted}
             onChange={this.handleSettingsSelect}
           />
           <Checkbox
             label="Autoadvance"
             name="autoadvance"
+            className='short'
             checked={temporaryTile.settings.autoadvance}
             onChange={this.handleSettingsSelect}
           />
@@ -603,6 +605,7 @@ class TileForm extends Component {
           <div className='row'>
             <Checkbox
               label="Loop section?"
+              className='short'
               name="loop_section"
               checked={temporaryTile.settings.loop_section}
               onChange={this.handleSettingsSelect}
@@ -743,15 +746,6 @@ class TileForm extends Component {
             autoComplete="off"
           />
         </div>
-        <div className='row single'>
-          <Select
-            name='units'
-            selected={temporaryTile.settings.units}
-            options={UNITS}
-            title='Units'
-            onChange={this.handleSettingsSelect}
-          />
-        </div>
       </div>
     )
   }
@@ -838,32 +832,40 @@ class TileForm extends Component {
         <Checkbox
           label="Sound effects"
           name="has_audio"
+          className='short'
           checked={temporaryTile.settings.has_audio}
           onChange={this.handleSettingsSelect}
         />
         {temporaryTile.settings.has_audio && (
-          <div >
-            <AudioSelect
-              title="On click"
-              name="audio_on_click_id"
-              selected={temporaryTile.settings.audio_on_click_id}
-              onChange={this.handleSettingsSelect}
-            />
-
-            <Checkbox
-              label="Navigate when audio finishes"
-              name="navigate_when_audio_finishes"
-              checked={temporaryTile.settings.navigate_when_audio_finishes}
-              onChange={this.handleSettingsSelect}
-              autoComplete="off"
-            />
-
-            <AudioSelect
-              title="On hover"
-              name="audio_on_hover_id"
-              selected={temporaryTile.settings.audio_on_hover_id}
-              onChange={this.handleSettingsSelect}
-            />
+          <div>
+            <div className='row single'>
+              <AudioSelect
+                title="On click"
+                name="audio_on_click_id"
+                selected={temporaryTile.settings.audio_on_click_id}
+                onChange={this.handleSettingsSelect}
+              />
+            </div>
+
+            {!!temporaryTile.settings.audio_on_click_id && (
+              <Checkbox
+                label="Navigate when audio finishes"
+                name="navigate_when_audio_finishes"
+                className='short'
+                checked={temporaryTile.settings.navigate_when_audio_finishes}
+                onChange={this.handleSettingsSelect}
+                autoComplete="off"
+              />
+            )}
+
+            <div className='row single'>
+              <AudioSelect
+                title="On hover"
+                name="audio_on_hover_id"
+                selected={temporaryTile.settings.audio_on_hover_id}
+                onChange={this.handleSettingsSelect}
+              />
+            </div>
           </div>
         )}
       </div>
@@ -874,6 +876,15 @@ class TileForm extends Component {
     const { temporaryTile } = this.props
     return (
       <div>
+        <div className='row single'>
+          <Select
+            name='units'
+            selected={temporaryTile.settings.units || 'px'}
+            options={UNITS}
+            title='Units'
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
         <Slider
           title='Opacity'
           name='opacity'
@@ -905,18 +916,21 @@ class TileForm extends Component {
         <Checkbox
           label="Element is a Popup"
           name="is_popup"
+          className='short'
           checked={temporaryTile.settings.is_popup}
           onChange={this.handleSettingsSelect}
           autoComplete="off"
         />
         {temporaryTile.settings.is_popup && (
-          <TextInput
-            title="Popup group"
-            name="popup_group"
-            data={temporaryTile.settings}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
+          <div className='row single_text'>
+            <TextInput
+              title="Popup group"
+              name="popup_group"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
         )}
         <Checkbox
           label="Wait to appear"
@@ -926,13 +940,15 @@ class TileForm extends Component {
           autoComplete="off"
         />
         {temporaryTile.settings.wait_to_appear && (
-          <TextInput
-            title="Appear after"
-            name="appear_after"
-            data={temporaryTile.settings}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
+          <div className='row single_text'>
+            <TextInput
+              title="Appear after"
+              name="appear_after"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
         )}
       </div>
     )
-- 
cgit v1.2.3-70-g09d2