|
|
@@ -1,5 +1,6 @@
|
|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
|
@@ -13,60 +14,110 @@
|
|
|
<script src="../script/ao_module.js"></script>
|
|
|
<script src="photo.js"></script>
|
|
|
<style>
|
|
|
-
|
|
|
+ @media only screen and (min-width: 1200px) {
|
|
|
+ #menu {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 200px;
|
|
|
+ min-width: 200px;
|
|
|
+ height: 100vh;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ #showmenuBtn {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media only screen and (max-width: 1200px) {
|
|
|
+ #menu {
|
|
|
+ display: none;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ #showmenuBtn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #display {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 0;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ #main {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
</style>
|
|
|
-
|
|
|
+
|
|
|
</head>
|
|
|
-<body>
|
|
|
|
|
|
- <div class="ui left vertical menu" id="menu">
|
|
|
- <div class="item">
|
|
|
- <img class="ui fluid image" src="img/banner.png">
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- Browse Photos
|
|
|
- <div class="menu">
|
|
|
- <a class="active item">user:/</a>
|
|
|
+<body>
|
|
|
+ <div id="main">
|
|
|
+ <div class="ui left vertical menu" id="menu">
|
|
|
+ <div class="item">
|
|
|
+ <img class="ui fluid image" src="img/banner.png">
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ Browse Photos
|
|
|
+ <div class="menu">
|
|
|
+ <a class="active item">user:/</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="item">
|
|
|
- Tags by AI
|
|
|
- <div class="menu">
|
|
|
- <a class="active item">#a</a>
|
|
|
- <a class="item">#b</a>
|
|
|
- <a class="item">#c</a>
|
|
|
- <a class="item">See More</a>
|
|
|
+ <div class="item">
|
|
|
+ Tags by AI
|
|
|
+ <div class="menu">
|
|
|
+ <a class="active item">#a</a>
|
|
|
+ <a class="item">#b</a>
|
|
|
+ <a class="item">#c</a>
|
|
|
+ <a class="item">See More</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
|
|
|
- <div class="ui segment" x-data='folderObject()' x-init="init()">
|
|
|
- <div class="ui six cards viewbox">
|
|
|
- <template x-for="image in images">
|
|
|
- <div class="ui small card" x-on:click="showImage($el);" :filedata="encodeURIComponent(JSON.stringify({'filename':image.split('/').pop(),'filepath':image}))">
|
|
|
- <a class="image" >
|
|
|
+ <div id="display" class="ui segment" x-data='folderObject()' x-init="init()">
|
|
|
+ <div class="ui six cards viewbox">
|
|
|
+ <template x-for="image in images">
|
|
|
+ <div class="ui small card" x-on:click="showImage($el);"
|
|
|
+ :filedata="encodeURIComponent(JSON.stringify({'filename':image.split('/').pop(),'filepath':image}))">
|
|
|
+ <a class="image">
|
|
|
<img :src="'../system/file_system/loadThumbnail?bytes=true&vpath=' + image">
|
|
|
</a>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ </div>
|
|
|
+ <button x-on:click="updateRenderingPath('user:/Photo/油圖/*.jpg');">Click Me</button>
|
|
|
</div>
|
|
|
- <button x-on:click="updateRenderingPath('user:/Photo/油圖/*.jpg');">Click Me</button>
|
|
|
</div>
|
|
|
- <script>
|
|
|
- $(window).on("resize", function(){
|
|
|
- if (window.innerWidth < 500){
|
|
|
- $(".viewbox").attr("class", "ui three cards viewbox");
|
|
|
- }else if (window.innerWidth < 800){
|
|
|
- $(".viewbox").attr("class", "ui four cards viewbox");
|
|
|
- }else if (window.innerWidth < 1200){
|
|
|
- $(".viewbox").attr("class", "ui six cards viewbox");
|
|
|
- }else{
|
|
|
- $(".viewbox").attr("class", "ui ten cards viewbox");
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
+ <button id="showmenuBtn" onclick="$('#menu').slideToggle();">S</button>
|
|
|
</body>
|
|
|
+<script>
|
|
|
+ $(window).on("resize ", function() {
|
|
|
+ //check if the menu is opened
|
|
|
+ if (window.innerWidth < 1200) {
|
|
|
+ $('#menu').slideUp();
|
|
|
+ }
|
|
|
+ if (window.innerWidth >= 1200) {
|
|
|
+ $('#menu').slideDown();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (window.innerWidth < 500) {
|
|
|
+ $(".viewbox ").attr("class ", "ui three cards viewbox ");
|
|
|
+ } else if (window.innerWidth < 800) {
|
|
|
+ $(".viewbox ").attr("class ", "ui four cards viewbox ");
|
|
|
+ } else if (window.innerWidth < 1200) {
|
|
|
+ $(".viewbox ").attr("class ", "ui six cards viewbox ");
|
|
|
+ } else {
|
|
|
+ $(".viewbox ").attr("class ", "ui ten cards viewbox ");
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
</html>
|
TC