form styling

4 files changed, 96 insertions, 48 deletions

diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index 927b89d..d0ebea3 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -71,7 +71,7 @@ export const TextArea = props => (
 )
 
 export const Checkbox = props => (
-  <label className="checkbox">
+  <label className={props.className ? props.className + " checkbox" : "checkbox"}>
     <input
       type="checkbox"
       name={props.name}
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index bfdbe5c..171bb38 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -69,6 +69,9 @@
   justify-content: flex-start;
   align-items: center;
 }
+.box form label.checkbox.short span {
+  padding: 0.125rem 0;
+}
 .box form input[type="checkbox"] {
   margin-left: 0rem;
 }
@@ -104,6 +107,9 @@
   padding: 0.25rem;
   margin-right: 0;
 }
+.box .single .select {
+  width: 9.25rem;
+}
 .box .selects label {
   flex-direction: row;
   width: 6.5rem;
@@ -114,9 +120,9 @@
   padding: 0.25rem;
 }
 
-.box form .single label span,
-.box form .pair label span {
-  min-width: 3rem;
+.box form .single label span {
+  min-width: auto;
+  width: 4.25rem;
   padding: 0.25rem 0;
 }
 .box .single label {
@@ -125,6 +131,11 @@
   margin-right: 0.5px;
   min-width: auto;
 }
+
+.box form .pair label span {
+  min-width: 3rem;
+  padding: 0.25rem 0;
+}
 .box .pair label {
   flex-direction: row;
   width: 6.5rem;
@@ -134,10 +145,28 @@
 .box .pair input[type=text] {
   width: 3rem;
 }
+
+.box form .single_text label span {
+  min-width: auto;
+  width: 6rem;
+  padding: 0.25rem 0;
+}
+.box .single_text input[type=text] {
+  width: 7rem;
+}
+.box .single_text label {
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  margin-right: 0.5px;
+  min-width: auto;
+}
+
 .box .position {
   font-size: smaller;
   margin-bottom: 0.25rem;
 }
+
 button.box_corner {
   position: absolute;
   top: 1.25rem; right: 1.25rem;
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
index 2998007..2e0efb9 100644
--- a/frontend/app/views/page/page.css
+++ b/frontend/app/views/page/page.css
@@ -117,6 +117,9 @@
 .box .row.pair {
   justify-content: space-between;
 }
+.box .row.pair.with_checkbox {
+  align-items: flex-end;
+}
 .box .row.single {
   justify-content: space-between;
 }
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}
-            />
+          <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>
 
-            <Checkbox
-              label="Navigate when audio finishes"
-              name="navigate_when_audio_finishes"
-              checked={temporaryTile.settings.navigate_when_audio_finishes}
-              onChange={this.handleSettingsSelect}
-              autoComplete="off"
-            />
+            {!!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"
+              />
+            )}
 
-            <AudioSelect
-              title="On hover"
-              name="audio_on_hover_id"
-              selected={temporaryTile.settings.audio_on_hover_id}
-              onChange={this.handleSettingsSelect}
-            />
+            <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>
     )