Update to latest exerslide version

EECS481-Official · Sep 7, 2016 · 8a1b730 · 8a1b730
1 parent 9bfaefb
commit 8a1b730
Show file tree

Hide file tree

Showing 24 changed files with 451 additions and 447 deletions.
diff --git a/css/a11y.css b/css/a11y.css
@@ -4,11 +4,7 @@
 
 .htmlExercise > .example > .editorWithPreview {
   border: 1px solid #DDD;
-}
-
-.htmlExercise > .example > .editorWithPreview > * {
-  display: inline-block;
-  vertical-align: top;
+  display: flex;
 }
 
 .editorWithPreview > .preview,
@@ -22,17 +18,19 @@
 }
 
 .editorWithPreview > .editor {
-  width: 70%;
   font-size: 0.8em;
+  max-width: 70%;
 }
 
 .editorWithPreview > .preview {
-  width: 30%;
-  padding-left: 20px;
-  padding-top: 10px;
+  padding: 10px;
   overflow: auto;
 }
 
+.CodeMirror {
+  overflow: hidden;
+}
+
 .htmlExercise > .example > .verify {
   margin-top: 10px;
 }
@@ -51,40 +49,3 @@ kbd {
   line-height: 1.4;
   white-space: nowrap;
 }
-
-.popupMenuWidget {
-  padding: 1em;
-  position: relative;
-}
-
-.popupMenuWidget [role="button"] {
-  border: 1px solid black;
-  border-radius: 3px;
-  display: inline-block;
-  padding: 1px 3px;
-  position: relative;
-  z-index: 2;
-}
-
-.popupMenuWidget [role="button"]:hover,
-.popupMenuWidget [role="button"]:focus {
-  text-decoration: none;
-}
-
-.popupMenuWidget [role="menu"] {
-  border: 1px solid black;
-  display: none;
-  position: relative;
-  top: -1px;
-  z-index: 1;
-}
-
-.popupMenuWidget [role="menu"] > a {
-  display: block;
-  padding: 0px 3px;
-}
-
-.popupMenuWidget [role="menuitem"]:focus {
-  background-color: #428bca;
-  color: white;
-}
diff --git a/css/navigationButtons.css b/css/navigationButtons.css
diff --git a/css/style.css b/css/style.css
@@ -17,24 +17,36 @@
  * so that it is easy to overwrite them.
  */
 
+html, body {
+  /**
+   * Disables inertia effects 
+   */
+  height: 100%;
+  overflow: hidden;
+  font-family: Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 body {
   color: #333;
   margin: 0;
   padding: 0;
 }
 
-#loader {
+#exerslide-loader {
   align-items: center;
   display: flex;
   font-size: 4em;
   height: 100vh;
   justify-content: center;
 }
 
-#page {
+#exerslide-page {
   bottom: 0;
   display: flex;
   left: 0;
+  line-height: 1;
   position: absolute;
   right: 0;
   top: 0;
@@ -59,100 +71,126 @@ body {
 
 /* CODE */
 
-pre > code {
+#exerslide-slide  code,
+#exerslide-slide p > code {
   background: #f9f9f9;
-  display: block;
-  font-size: 0.9em;
-  overflow-x: auto;
-  padding: 1rem;
 }
 
-pre {
-  margin-bottom: 1.5rem;
+#exerslide-slide pre + :not(hr) {
+  margin-top: 1rem;
+}
+
+#exerslide-slide pre > code {
+  display: block;
+  font-size: 0.9rem;
+  overflow-x: auto;
+  padding: 0.5rem;
 }
 
 /* MAIN CONTENT */
 
-#slide {
+#exerslide-slide {
   align-items: center;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   flex: 2;
   overflow-y: auto;
-  padding: 1.5em;
+  padding: 1rem;
   position: relative;
   width: 100%;
 }
 
-#slide-content {
-  width: 100%;
+#exerslide-slide > * {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  line-height: 1.6;
   /**
    * This is the default max width of the slide content. However, since
    * exerslide allows the content width to be configured via slides, this is
    * not going to have any effect, unless auto-scaling is disabled completely
    * (via scale: false in the meta data section of the first slide)
+   *
+   * We cannot just use `width: 45em` because we want the slide to be responsive
+   * when the viewport shrinks.
    */
   max-width: 45em;
-  flex: 1;
-  flex-direction: column;
-  display: flex;
+  /**
+   * This ensures that slides with little content (i.e. without a full line of
+   * content) are still positioned correclty.
+   */
+  width: 100%;
+}
+
+
+#exerslide-slide h1,
+#exerslide-slide h2,
+#exerslide-slide h3,
+#exerslide-slide h4 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-#slide h1,
-#slide-title {
+#exerslide-slide h1,
+#exerslide-slide-title {
+  margin-top: 0;
   flex-shrink: 0;
-  margin-bottom: 1rem;
   text-align: center;
 }
 
-#slide-title:focus {
+#exerslide-slide h1:focus,
+#exerslide-slide-title:focus {
   outline: none;
 }
 
-/* This ensures that embedded images are scaled down to the width of the main
- * column.
- */
-#slide img {
-  max-width: 100%;
+#exerslide-slide h1 {
+  font-size: 1.8rem;
 }
 
-/* DEBUG information */
+#exerslide-slide h2 {
+  font-size: 1.4rem;
+}
 
-.__exerslide__file_path {
-  background-color: #EEE;
-  line-height: 1em;
-  padding: 0.5em;
-  text-align: center;
-  width: 100%;
+#exerslide-slide h3 {
+  font-size: 1.2rem;
+}
+
+#exerslide-slide h4 {
+  font-size: 1.1rem;
+}
+
+#exerslide-slide h2 + p,
+#exerslide-slide h3 + p,
+#exerslide-slide h4 + p {
+  margin-top: 0.3rem;
+}
+
+/**
+ * Responsive images.
+ */
+#exerslide-slide img {
+  max-width: 100%;
 }
 
 /* MOBILE */
 
 @media(max-width: 768px) {
+  html, body {
+    overflow: auto;
+  }
+
   /*
    * Makes navigation bar move to the end of the content instead of sticking to
    * the bottom of the screen
    */
-  #page {
+  #exerslide-page {
     bottom: initial;
+    min-height: 100vh;
   }
 
   /* Makes the page look better when the menu is TOC is expanded */
-  #main {
+  #exerslide-main {
     overflow-x: hidden;
   }
 }
-
-@media screen and (min-width: 40em) {
-  #slide h1 {
-    font-size: 2.2em;
-  }
-
-  #slide h2 {
-    font-size: 1.8em;
-  }
-
-  #slide h3 {
-    font-size: 1.4em;
-  }
-}
diff --git a/css/taop.css b/css/taop.css
@@ -7,7 +7,8 @@
   width: 1px;
 }
 
-#toolbar {
+.exerslide-toolbar-text,
+.exerslide-toolbar-button {
   color: #888;
 }
 
@@ -16,7 +17,8 @@ html .editorWithPreview input[type=number],
 html .editorWithPreview textarea {
   display: inline-block;;
   box-sizing: border-box;
-  width: auto;;
+  width: initial;
+  max-width: 100%;
   height: auto;
   padding: 1px;
   border: 1px inset;
@@ -39,22 +41,30 @@ html .editorWithPreview button {
   line-height: inherit;
 }
 
-#slide h2 {
+#exerslide-slide {
+  position: initial;
+}
+
+#exerslide-slide {
+  padding-top: 0;
+}
+
+#exerslide-slide h2 {
   font-size: 1.3em;
   margin: 1.1em 0 0.8em 0;
   font-weight: bold;
 }
 
-#slide .previewHeading {
+#exerslide-slide .previewHeading {
     margin: 0 0 1.1em;
     color: grey;
 }
-#slide h3 {
+#exerslide-slide h3 {
     font-size: 1.1em;
 }
 
 @media screen and (min-width: 40em) {
-  #slide h1 {
+  #exerslide-slide h1 {
       font-size: 1.8em;
       font-weight: bold;
   }