player

app/static/css/partials/_menu.scss

@@ -7,9 +7,22 @@
   box-sizing: border-box;
   z-index: 110;
 
+  .item-title {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    h1 {
+      font-size: inherit;
+      margin: 0;
+      padding: 0;
+    }
+  }
   @media screen and (max-width: 799px) {
     padding-top: calc(var(--spacing) * 1.6);
     height: 98px;
+    .item-title {
+      display: none
+    }
   }
 
   @media screen and (min-width: 800px) {

app/static/css/partials/_player.scss

@@ -6,12 +6,17 @@
   h1 {
     padding-left: var(--spacing-2);
     padding-right: var(--spacing-2);
-    padding-top: 32px;
+    padding-top: 16px;
     font-size: 20px;
     letter-spacing: 1px;
     font-weight: bold;
     max-width: var(--container-width);
     margin: auto;
+
+    a {
+      color: var(--color-link);
+      text-decoration: none;
+    }
   }
   h2 {
     padding: 4px var(--spacing-2);
@@ -20,6 +25,15 @@
   }
   .info {
     margin-bottom: 16px;
+    h1 {
+      display: none;
+    }
+    @media screen and (max-width: 799px) {
+      h1 {
+        display: block;
+      }
+    }
+
   }
   .vbox {
     max-width: var(--container-width);
@@ -36,5 +50,7 @@
   .annotation {
     display: none;
     text-align: center;
+    max-width: 90%;
+    margin: auto;
   }
 }

app/static/js/play.js

@@ -145,16 +145,29 @@ function timeupdate(event) {
 function formatInfo(config, player) {
     var info = document.createElement('div')
     info.classList.add('info')
+
     var folder = document.createElement('a')
     folder.href = '..'
     folder.innerText = config.folder
     var h1 = document.createElement('h1')
     h1.appendChild(folder)
     var title = document.createElement('span')
-    title.innerHTML = ': ' + config.title
+    title.innerHTML = ' - ' + config.title
     h1.appendChild(title)
     info.appendChild(h1)
 
+    var folder = document.createElement('a')
+    folder.href = '..'
+    folder.innerText = config.folder
+    var h1 = document.createElement('h1')
+    h1.appendChild(folder)
+    var title = document.createElement('span')
+    title.innerHTML = ' - ' + config.title
+    h1.appendChild(title)
+    var t = document.querySelector('.topnav .item-title')
+    t.appendChild(h1)
+
+
     player.appendChild(info)
     return info
 }

app/templates/base.html

@@ -18,6 +18,7 @@
 				njp.ma
 				</div>
 		  </a>
+		  <div class="item-title"></div>
 		  <nav>
 			  <a href="{% url 'films' %}" class="animated-title"><span class="text">videos 비디오</a>
 			  <a href="{% url 'texts' %}" class="animated-title"><span class="text">cuts 장면들</a>