From ff1bd0898e9baa221a7f5b03aa62579b14844e11 Mon Sep 17 00:00:00 2001
From: stv <stv@stanford.edu>
Date: Thu, 9 May 2019 12:20:44 -0700
Subject: [PATCH] Add location ID to Studio component footers

This is helpful for a number of use cases for us at Stanford,
where instructors/staff/admin need access to an item's location id.

Previously, we'd have to dig this value out by other means.
This makes it easy to discover and use as needed, eg: copy/paste, etc.

One major example of our use of it is with the `in-video-quiz` XBlock [1][2],
which maps video components to capa problems.

- [1] https://github.com/Stanford-Online/xblock-in-video-quiz
- [2] https://github.com/Stanford-Online/xblock-in-video-quiz/blob/master/invideoquiz/invideoquiz.py#L41-L61
---
 cms/static/sass/elements/_xblocks.scss   | 23 +++++++++++++++++++++++
 cms/templates/studio_xblock_wrapper.html |  6 ++++++
 2 files changed, 29 insertions(+)

diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss
index 832200618ba3..278817847a24 100644
--- a/cms/static/sass/elements/_xblocks.scss
+++ b/cms/static/sass/elements/_xblocks.scss
@@ -506,6 +506,29 @@
       }
     }
   }
+  .location-footer {
+    .location-container {
+      position: relative;
+      background: #f9f9f9;
+      border-top: 1px solid #ddd;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      .location-label {
+        position: absolute;
+        left: 0;
+        padding: 8px 10px;
+        border-right: 1px solid #ddd;
+        z-index: 11;
+      }
+      .location-value {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 5px 10px 5px 90px;
+        z-index: 10;
+        font-size: .75em;
+      }
+    }
+  }
 }
 
 // +Editing - Xblocks
diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html
index 2e9bc3308a5c..ae265cd5350c 100644
--- a/cms/templates/studio_xblock_wrapper.html
+++ b/cms/templates/studio_xblock_wrapper.html
@@ -166,6 +166,12 @@
         % endif
         ${content | n, decode.utf8}
         </article>
+        <footer class="location-footer">
+            <div class="location-container">
+                <label class="location-label">${_('Location:')}</label>
+                <p class="location-value">${ xblock.location }</p>
+            </div>
+        </footer>
     % else:
         <div class="xblock-message-area">
         ${content | n, decode.utf8}