up

src/components/ControlPage.vue

@@ -316,15 +316,6 @@ onUnmounted(() => {
               :loading="isCheckingSound"
               @click="checkSound"
             >Проверка звука</n-button>
-            <n-button
-              v-if="!state?.outputOpen"
-              :disabled="display === null || isBusy"
-              @click="run(() => bridge!.show(display!))"
-              >Открыть показ</n-button
-            >
-            <n-button v-else :disabled="isBusy" @click="run(() => bridge!.closeOutput())"
-              >Закрыть показ</n-button
-            >
             <n-button
               v-if="state"
               square
@@ -363,6 +354,17 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
+      <template #footer>
+        <n-space justify="end">
+          <n-button
+            v-if="!state?.outputOpen"
+            :disabled="display === null || isBusy"
+            @click="run(() => bridge!.show(display!))"
+          >Открыть показ</n-button>
+          <n-button v-else :disabled="isBusy" @click="run(() => bridge!.closeOutput())"
+          >Закрыть показ</n-button>
+        </n-space>
+      </template>
     </n-card>
     <template v-if="state">
       <section class="presentation-grid">
@@ -469,18 +471,18 @@ onUnmounted(() => {
             </p>
           </n-space>
         </n-card>
+        <MusicPlanPanel
+          :playlists="onlineState.playlists"
+          :local-playlists="state.catalog.playlists"
+          :channel="state.channels.music"
+          :output-open="state.outputOpen"
+          :can-edit="onlineState.authenticated && onlineState.connection !== 'offline'"
+          :can-use="planStatus.editable"
+          :is-busy="isBusy || isOnlineBusy || onlineState.busy"
+          @action="runOnline"
+          @command="send"
+        />
       </section>
-      <MusicPlanPanel
-        :playlists="onlineState.playlists"
-        :local-playlists="state.catalog.playlists"
-        :channel="state.channels.music"
-        :output-open="state.outputOpen"
-        :can-edit="onlineState.authenticated && onlineState.connection !== 'offline'"
-        :can-use="planStatus.editable"
-        :is-busy="isBusy || isOnlineBusy || onlineState.busy"
-        @action="runOnline"
-        @command="send"
-      />
     </template>
   </main>
 </template>
@@ -495,6 +497,7 @@ onUnmounted(() => {
 }
 
 .presentation-grid {
+  align-items: start;
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
@@ -507,14 +510,20 @@ onUnmounted(() => {
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
 }
 
-.screen-grid > * {
+.screen-grid > *,
+.presentation-grid > * {
   min-width: 0;
 }
 
+.screen-preview {
+  justify-self: center;
+  width: 85%;
+}
+
 .preview {
   background: var(--brand-background);
   display: block;
-  max-height: 25vh;
+  max-height: 20vh;
   object-fit: contain;
   width: 100%;
 }