Add a scrollable image with fixed height. Increase version number.

yenchiah · Dec 4, 2023 · 3fb4edc · 3fb4edc
1 parent db29d81
commit 3fb4edc
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 16 deletions.
diff --git a/css/controls.css b/css/controls.css
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.41
+ * Version: v3.43
  * This CSS file has control elements that do not require JavaScript
  * If you want to keep this template updated, avoid modifying this file
  * Instead, add your own CSS in the custom.css file

diff --git a/css/frame.css b/css/frame.css
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.42
+ * Version: v3.43
  * This CSS file is for the website frame
  * If you want to keep this template updated, avoid modifying this file
  * Instead, add your own CSS in the custom.css file
@@ -432,6 +432,37 @@ hr {
   padding: 0;
 }
 
+.scrollable-image-container {
+  overflow: auto;
+  border: 1px solid #666666;
+  display: grid;
+  width: fit-content;
+  margin: 15px 0;
+}
+
+.scrollable-image-container.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.scrollable-image {
+  border-radius: 2px;
+  margin: 0;
+  overflow: auto;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+}
+
+.scrollable-image.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .image {
   border-radius: 2px;
   width: 100%;
@@ -515,7 +546,7 @@ ol.publication.C-list li p {
 }
 
 ol.publication.C-list li p:before {
-  content: "[C"counter(C-counter)"]";
+  content: "[C" counter(C-counter)"]";
 }
 
 ol.publication.J-list {
@@ -527,7 +558,7 @@ ol.publication.J-list li p {
 }
 
 ol.publication.J-list li p:before {
-  content: "[J"counter(J-counter)"]";
+  content: "[J" counter(J-counter)"]";
 }
 
 ol.publication.T-list {
@@ -539,7 +570,7 @@ ol.publication.T-list li p {
 }
 
 ol.publication.T-list li p:before {
-  content: "[T"counter(T-counter)"]";
+  content: "[T" counter(T-counter)"]";
 }
 
 ol.publication.O-list {
@@ -551,7 +582,7 @@ ol.publication.O-list li p {
 }
 
 ol.publication.O-list li p:before {
-  content: "[O"counter(O-counter)"]";
+  content: "[O" counter(O-counter)"]";
 }
 
 ol.publication.P-list {
@@ -563,7 +594,7 @@ ol.publication.P-list li p {
 }
 
 ol.publication.P-list li p:before {
-  content: "[P"counter(P-counter)"]";
+  content: "[P" counter(P-counter)"]";
 }
 
 ol.publication.M-list {
@@ -575,7 +606,7 @@ ol.publication.M-list li p {
 }
 
 ol.publication.M-list li p:before {
-  content: "[M"counter(M-counter)"]";
+  content: "[M" counter(M-counter)"]";
 }
 
 ol.publication.F-list {
@@ -587,7 +618,7 @@ ol.publication.F-list li p {
 }
 
 ol.publication.F-list li p:before {
-  content: "[F"counter(F-counter)"]";
+  content: "[F" counter(F-counter)"]";
 }
 
 ol.publication.A-list {
@@ -599,7 +630,7 @@ ol.publication.A-list li p {
 }
 
 ol.publication.A-list li p:before {
-  content: "[A"counter(A-counter)"]";
+  content: "[A" counter(A-counter)"]";
 }
 
 ol.nested {

diff --git a/css/widgets.css b/css/widgets.css
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.41
+ * Version: v3.43
  * This CSS file has widgets for building interactive web applications
  * Use this file with widgets.js
  * If you want to keep this template updated, avoid modifying this file

diff --git a/index.html b/index.html
@@ -422,17 +422,23 @@ <h2 id="centered-image-and-table" class="no-top-margin">Centered Image and Table
               custosi traductores. At solmen va esser.
             </p>
             <p class="text text-center graph-title">
-              This is the title for the bottom image
+              This image does not scroll and only scale.
             </p>
             <img class="image center max-width-400 add-top-margin-small" src="img/dummay-img.png">
+            <p class="text text-center graph-title">
+              This image scrolls on mobile with a fixed height.
+            </p>
+            <div class="scrollable-image-container center add-top-margin-small">
+              <img class="scrollable-image center" src="img/dummay-img.png">
+            </div>
             <p class="text">
               Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica,
               sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e
               li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
               custosi traductores. At solmen va esser.
             </p>
             <p class="text text-center graph-title">
-              This is the title for the bottom table
+              This is the title for the bottom scrollable table.
             </p>
             <div class="custom-table-container center add-top-margin-small">
               <table class="custom-table">
@@ -481,7 +487,7 @@ <h2 id="centered-image-and-table" class="no-top-margin">Centered Image and Table
               </table>
             </div>
             <p class="text text-center graph-title">
-              This is the title for the bottom very long scrollable table
+              This is the title for the bottom very long scrollable table.
             </p>
             <div class="custom-table-container center add-top-margin-small">
               <table class="custom-table">

diff --git a/js/util.js b/js/util.js
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.41
+ * Version: v3.43
  * This JS file has general utility functions
  * Use this file with widgets.js
  * If you want to keep this template updated, avoid modifying this file

diff --git a/js/widgets.js b/js/widgets.js
@@ -1,6 +1,6 @@
 /*************************************************************************
  * GitHub: https://github.com/yenchiah/project-website-template
- * Version: v3.41
+ * Version: v3.43
  * This JS file has widgets for building interactive web applications
  * Use this file with widgets.css
  * If you want to keep this template updated, avoid modifying this file