SAAS-1164 - styling for publishing frontend

airtime_mvc/application/views/scripts/library/publish-dialog.phtml

@@ -8,23 +8,19 @@
     <div class="inner_editor_wrapper">
         <form class="media-metadata">
             <input ng-value="media.id" class="obj_id" type="hidden"/>
-            <label class="publish-md-field">
-                <?php echo _("Title") ?>
-                <input disabled ng-model="media.track_title" type="text"/>
-            </label>
-            <label class="publish-md-field">
-                <?php echo _("Creator") ?>
-                <input disabled ng-model="media.artist_name" type="text"/>
-            </label>
-            <label class="publish-md-field">
-                <?php echo _("Description") ?>
-                <textarea disabled ng-model="media.description"></textarea>
-            </label>
+            <label class="publish-md-field"><?php echo _("Title") ?></label>
+            <input disabled ng-model="media.track_title" type="text"/>
+
+            <label class="publish-md-field"><?php echo _("Creator") ?></label>
+            <input disabled ng-model="media.artist_name" type="text"/>
+
+            <label class="publish-md-field"><?php echo _("Description") ?></label>
+            <textarea disabled ng-model="media.description"></textarea>
             <fieldset>
                 <legend><?php echo _("Publish to:"); ?></legend>
-                <div ng-repeat="(source, label) in sources.toPublish">
+                <div class="publish-sources" ng-repeat="(source, label) in sources.toPublish">
                     <input ng-model="publishData[source]" type="checkbox" name="publish_sources" id="{{source}}">
-                    <label for="{{source}}">{{label}}</label><br/>
+                    <label class="source-name" for="{{source}}">{{label}}</label><br/>
                 </div>
                 <div ng-if="sources.toPublish.length == 0">
                     <?php echo _("You have already published this track to all available sources!") . "<br/>"
@@ -36,7 +32,7 @@
                 <div class="published-sources" ng-repeat="(source, label) in sources.published">
                     <span class="sp-checked-icon checked-icon left-floated"></span>
                     <span class="source-name">{{label}}</span>
-                    <button class="btn btn-small" ng-click="remove(source)"><?php echo _("Unpublish") ?></button>
+                    <button class="btn btn-small btn-danger" ng-click="remove(source)"><?php echo _("Unpublish") ?></button>
                 </div>
                 <div ng-if="sources.published.length == 0">
                     <?php echo _("You haven't published this track to any sources!") . "<br/>"

airtime_mvc/public/css/dashboard.css

@@ -408,7 +408,7 @@ textarea {
 
 .edit-md-dialog .zend_form dt {
     float: left;
-    width: 40%;
+    width: 35%;
 
     text-align: right;
 
@@ -419,7 +419,7 @@ textarea {
 
 .edit-md-dialog .zend_form dd {
     float: left;
-    width: auto;
+    width: 60%;
 
     font-size: 14px;
     margin: 0 0 10px;

airtime_mvc/public/css/playlist_builder.css

@@ -14,7 +14,8 @@
 }
 
 .edit-md-dialog dd input.input_text {
-    width: auto;
+    /*width: auto;*/
+    width: 100%;
 }
 
 .spl_sortable,.spl_sortable>li,.side_playlist>div,#spl_editor,.spl_artist,.spl_cue_in,.spl_fade_in,.spl_cue_out,.spl_fade_out
@@ -48,7 +49,7 @@
 }
 
 .side_playlist textarea {
-    height: 3.2em;
+    /*height: 70px;*/
 }
 
 .spl_sortable {

airtime_mvc/public/css/styles.css

@@ -1703,7 +1703,12 @@ h2#scheduled_playlist_name span {
 }
 
 .simple-formblock dd .input_text {
-    width: 97.8%;
+    /*width: 97.8%;*/
+    width: 100%;
+}
+
+.simple-formblock dd textarea {
+    box-sizing: border-box;
 }
 
 .simple-formblock h2 {
@@ -1721,7 +1726,6 @@ h2#scheduled_playlist_name span {
     padding-right: 8px;
 }
 .ui-button-icon-only.crossfade-main-button .ui-button-text, .ui-button-icons-only.crossfade-main-button .ui-button-text {
-    padding: 0;
     text-indent: -1e+7px;
     padding: 0.1em 1em;
 }
@@ -3989,11 +3993,15 @@ li .ui-state-hover {
 .podcast-metadata p {
     text-align: center;
     padding: 0 5%;
+    margin-top: 0;
 }
 
 .podcast-metadata label,
 .podcast-metadata input,
-.podcast-metadata textarea {
+.podcast-metadata textarea,
+.media-metadata label,
+.media-metadata input,
+.media-metadata textarea{
     margin: 4px 0;
 }
 
@@ -4001,19 +4009,23 @@ li .ui-state-hover {
     margin: 8px 60% 0 0;
 }
 
-.podcast-metadata label {
+.podcast-metadata label,
+.media-metadata label {
     display: block;
     width: 20%;
     float: left;
 }
 
 .podcast-metadata input[type="text"],
-.podcast-metadata textarea {
+.podcast-metadata textarea,
+.media-metadata input[type="text"],
+.media-metadata textarea {
     width: 60%;
     float: left;
 }
 
 /* UI Revamp Video */
+
 #whatsnew {
     display: flex;
     flex-direction: column;
@@ -4059,9 +4071,21 @@ li .ui-state-hover {
 }
 
 /* jQuery dialog */
-.no-close .ui-dialog-titlebar-close {display: none }
+.no-close .ui-dialog-titlebar-close {
+    display: none
+}
 
 /* Publishing Dialog */
+
+.source-name {
+    text-align: left !important;
+}
+
+.publish-sources input[type="checkbox"] {
+    float: left;
+    margin: 8px 20px 0 7px;
+}
+
 .published-sources {
     color: #efefef;
     font-size: 14px;
@@ -4073,20 +4097,12 @@ li .ui-state-hover {
     padding-right: 8px;
 }
 
+.published-sources > .source-name {
+    display: inline-block;
+    width: 15%;
+    padding: 0 16px;
+}
+
 .publish-edit-md {
     float: right;
-}
-
-.publish-md-field {
-    text-align: left !important;
-    display: block;
-}
-
-.publish-md-field > textarea, .publish-md-field > input {
-    display: block;
-    width: 50%;
-}
-
-form.media-metadata fieldset {
-    margin-top: 8px;
 }