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;
+ }
}