Jump to anchor inside details tag and refactor tablet styles

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.c16ffcea.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c16ffcea.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.4bee132b.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4bee132b.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.0a5433f7.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.0a5433f7.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.37150387.min.css"
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.f26f5fbb.min.css"
 }

material/base.html

@@ -43,7 +43,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.37150387.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.f26f5fbb.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.3f90c815.min.css' | url }}">
       {% endif %}
@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.c16ffcea.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.4bee132b.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

src/assets/javascripts/index.ts

@@ -277,6 +277,28 @@ export function initialize(config: unknown) {
     )
       .subscribe()
 
+  // TODO: patch details!
+
+  /* Open details after anchor jump */
+  merge(hash$, of(location.hash)) // getLocationHash
+    .subscribe(hash => {
+      const el = getElement(hash)
+      console.log("jump to", hash)
+      if (typeof el !== "undefined") {
+        const parent = el.closest("details")
+        if (parent && !parent.open) { // only if it is not open!
+          parent.open = true
+
+          /* Hack: force reload for repositioning */ // TODO. what happens here!?
+          location.hash = "" // reset
+          requestAnimationFrame(() => {
+            location.hash = hash // tslint:disable-line
+          })
+          // TODO: setLocationHash() + forceLocationHashChange
+        }
+      }
+    })
+
   // Scroll lock
   const toggle$ = useToggle("search")
   combineLatest([
@@ -300,6 +322,8 @@ export function initialize(config: unknown) {
     )
       .subscribe()
 
+  /* ----------------------------------------------------------------------- */
+
   // General keyboard handlers
   keyboard$
     .pipe(

src/assets/stylesheets/base/_typeset.scss

@@ -419,12 +419,11 @@ kbd {
 
   // Data tables
   table:not([class]) {
-    @include z-depth(2);
-
     display: inline-block;
     max-width: 100%;
     border-radius: px2rem(2px);
     font-size: ms(-1);
+    box-shadow: inset 0 0 0 px2rem(1px) $md-color-black--lightest;
     overflow: auto;
     -webkit-overflow-scrolling: touch;