update notification styling

learningequality · Jul 23, 2020 · 9b95264 · 9b95264
1 parent acfb845
commit 9b95264
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 54 deletions.
diff --git a/...bri/plugins/device/assets/src/views/ManageContentPage/ManageChannelContentsPage/index.vue b/...bri/plugins/device/assets/src/views/ManageContentPage/ManageChannelContentsPage/index.vue
@@ -10,14 +10,15 @@
     />
 
     <template v-if="channel">
-      <NewChannelVersionBanner
-        v-if="availableVersions.studioLatest > availableVersions.installed"
-        class="banner"
-        :version="availableVersions.studioLatest"
-        @click="handleClickViewNewVersion"
-      />
 
-      <ChannelContentsSummary :channel="channel" />
+      <ChannelContentsSummary :channel="channel">
+        <NewChannelVersionBanner
+          v-if="availableVersions.studioLatest > availableVersions.installed"
+          class="banner"
+          :version="availableVersions.studioLatest"
+          @click="handleClickViewNewVersion"
+        />
+      </ChannelContentsSummary>
 
       <div style="text-align: right">
         <KButton

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/NewChannelVersionBanner.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/NewChannelVersionBanner.vue
@@ -1,16 +1,6 @@
 <template>
 
-  <div
-    class="new-version-banner"
-    :style="{ backgroundColor: $themePalette.lightblue.v_100 }"
-  >
-    <!-- stubs -->
-    <template v-if="false">
-      <UpdateChannelModal />
-      <NewChannelVersionPage />
-      {{ strings }}
-    </template>
-    <!-- end stubs -->
+  <div>
     <span class="version">
       <KIcon
         class="icon"
@@ -23,7 +13,7 @@
     </span>
     <KButton
       :text="$tr('viewChangesAction')"
-      appearance="flat-button"
+      appearance="basic-link"
       :primary="false"
       @click="$emit('click')"
     />
@@ -34,28 +24,14 @@
 
 <script>
 
-  import channelUpdateStrings from './channelUpdateStrings.js';
-  import UpdateChannelModal from './UpdateChannelModal';
-  import NewChannelVersionPage from './NewChannelVersionPage';
-
   export default {
     name: 'NewChannelVersionBanner',
-    components: {
-      UpdateChannelModal,
-      NewChannelVersionPage,
-    },
     props: {
       version: {
         type: Number,
         required: true,
       },
     },
-    computed: {
-      // Stubbed out
-      strings() {
-        return channelUpdateStrings;
-      },
-    },
     $trs: {
       versionAvailable: {
         message: 'Version {version} is available',
@@ -71,25 +47,14 @@
 
 <style lang="scss" scoped>
 
-  .new-version-banner {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 0 16px;
-  }
-
-  .version {
-    display: flex;
-    align-items: center;
-    // Slight nudge to align with button text
-    margin-bottom: 4px;
+  .version-available {
+    margin-right: 8px;
   }
 
   .icon {
-    margin-right: 16px;
-    margin-bottom: 4px;
+    position: relative;
+    top: 6px;
+    margin-right: 8px;
   }
 
   svg.icon {

diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
@@ -21,9 +21,16 @@
           />
         </h1>
       </div>
-      <p class="version">
-        {{ $tr('version', { version: versionNumber }) }}
-      </p>
+
+      <KFixedGrid numCols="4">
+        <KFixedGridItem span="1" class="version">
+          {{ $tr('version', { version: versionNumber }) }}
+        </KFixedGridItem>
+        <KFixedGridItem span="3" alignment="right">
+          <slot></slot>
+        </KFixedGridItem>
+      </KFixedGrid>
+
       <p dir="auto">
         {{ channel.description }}
       </p>
@@ -120,8 +127,6 @@
   }
 
   .version {
-    margin-bottom: 32px;
-    font-size: 14px;
     font-weight: bold;
   }