From 5f1c92c8377336aa9ff17329268eb8d438d3303c Mon Sep 17 00:00:00 2001 From: Jonatan Nilsson Date: Sun, 17 Jul 2016 10:44:57 +0000 Subject: [PATCH] controller: Made every button larger --- app/controller/components.js | 22 ++++++------- public/index.html | 1 + public/main.css | 63 +++++++++++++++++++++++++++++++++--- 3 files changed, 71 insertions(+), 15 deletions(-) diff --git a/app/controller/components.js b/app/controller/components.js index c6c7781..e967891 100644 --- a/app/controller/components.js +++ b/app/controller/components.js @@ -10,10 +10,10 @@ exports.presetList = function(vm) { return [ m('a.panel-graphic-preset-add.button', { onclick: vm.addPreset.bind(vm), - }, 'Save to preset list'), + }, 'Save Preset'), m('a.panel-graphic-display.success.button', { onclick: vm.displayCurrent.bind(vm), - }, 'Display'), + }, 'Display Live'), m('label', 'Presets'), m('ul.panel-graphic-preset', vm.presets.map((item, index) => m('li', { key: index }, [ @@ -24,15 +24,15 @@ exports.presetList = function(vm) { value: item.values[graphic.settings.main], }) ), - m('div', { class: 'small-2 columns' }, - m('a.panel-graphic-preset-remove.button.success', { - onclick: vm.displayPreset.bind(vm, item), - }, 'Display') - ), - m('div', { class: 'small-2 columns' }, - m('a.panel-graphic-preset-remove.button.alert', { - onclick: vm.removePreset.bind(vm, item), - }, 'Remove') + m('div', { class: 'small-4 columns' }, + [ + m('a.panel-graphic-preset-remove.button.success', { + onclick: vm.displayPreset.bind(vm, item), + }, 'Display'), + m('a.panel-graphic-preset-remove.button.alert', { + onclick: vm.removePreset.bind(vm, item), + }, 'X') + ] ), ]) ]) diff --git a/public/index.html b/public/index.html index 146028a..b28de8e 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ CasparCG Controller + diff --git a/public/main.css b/public/main.css index 7cb9604..8c0ed40 100644 --- a/public/main.css +++ b/public/main.css @@ -123,6 +123,10 @@ h4 { /* Inputs */ + .panel-graphic-property-item input { + display: inline-block; + } + label { color: #f1f1f1; } @@ -178,9 +182,60 @@ h4 { box-shadow: none; } - select - a.button { - margin: 0 1rem; - width: 10rem; + margin: 0 1rem 0 0; + width: 7rem; + } + +/* Media queries */ + + body { + font-size: 1.5rem; + } + + @media only screen and (max-device-width: 1280px) { + .header-item-hide { + width: 9rem; + line-height: 0rem; + } + + a.button { + font-size: 2rem; + line-height: 0; + width: auto; + } + + .panel-graphic-preset { + margin: 0; + } + + .panel-graphic-display, + .panel-graphic-preset-add { + margin-bottom: 3rem !important; + } + + .panel-graphic-preset-remove { + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .panel-graphic-preset-remove.alert { + padding-right: 1rem; + padding-left: 1rem; + } + + .panel-graphic-settings { + font-size: 1.3rem !important; + } + + .header-item-display { + font-size: 2rem; + margin-right: 12.5rem; + padding: 0.2rem 1rem; + } + + .panel-graphic-property-item input { + font-size: 2rem; + height: 3.5rem; + } }