사이드바 고정 및 방향 전환 추가

views/ringo/css/main.css

@@ -200,22 +200,15 @@ aside {
     padding-top: 10px;
     padding-left: 20px;
     padding-right: 20px;
+    padding-bottom: 20px;
     
     background-color: #ffeaee;
     
     min-height: calc(100vh - (50px + 12px));
 }
 
-.aside_width {
-    width: 290px;
-
-    float: left;
-}
-
 .do_fixed {
-    position: fixed;
-    
-    top: 52px;
+    float: left;
 }
 
 aside button {
@@ -331,10 +324,8 @@ article.main#title h1 {
 
     .do_fixed {
         position: inherit;
-    }
 
-    .aside_width {
-        display: none;
+        margin-bottom: 20px;
     }
 }
 

views/ringo/index.html

@@ -12,8 +12,8 @@
         <script defer src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
         <script defer src="/views/ringo/js/main.js.cache_v2"></script>
         <script defer src="/views/ringo/js/sidebar.js.cache_v3"></script>
-        <script defer src="/views/ringo/js/skin_set.js.cache_v5"></script>
-        <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="/views/ringo/css/main.css.cache_v8">
+        <script defer src="/views/ringo/js/skin_set.js.cache_v6"></script>
+        <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="/views/ringo/css/main.css.cache_v9">
         {% if request.cookies.get('main_css_darkmode', '') == '1' %}
             {{imp[3][5]|safe}}
             <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="/views/ringo/css/dark.css.cache_v2">
@@ -231,7 +231,6 @@
                 </article>
             </footer>
         </section>
-        <div class="aside_width">　</div>
         <aside class="do_fixed">
             {% if imp[1][7][1] == '' %}
                 <button id="side_button_1" class="side_button selected">{{'edit'|load_lang}}</button><!--

views/ringo/info.json

@@ -1,5 +1,5 @@
 {
     "name" : "Ringo",
-    "skin_ver" : "v1.1.2",
+    "skin_ver" : "v1.1.3",
     "require_ver" : "3500113"
 }

views/ringo/js/skin_set.js

@@ -31,12 +31,17 @@ function ringo_get_post() {
         window.localStorage.setItem('main_css_fixed_width', '');
     }
 
+    const check_5 = document.getElementById('sidebar_right');
+    if(check_5.checked === true) {
+        window.localStorage.setItem('main_css_sidebar_right', '1');
+    } else {
+        window.localStorage.setItem('main_css_sidebar_right', '0');
+    }
+
     history.go(0);
 }
 
 function ringo_do_skin_set() {
-    let cookies = document.cookie;
-    
     if(!window.localStorage.getItem('main_css_use_sys_darkmode') || window.localStorage.getItem('main_css_use_sys_darkmode') === '1') {
         if(window.matchMedia('(prefers-color-scheme: dark)').matches) {
             document.cookie = 'main_css_darkmode=1; path=/';
@@ -53,10 +58,6 @@ function ringo_do_skin_set() {
                 margin: auto;
             }
 
-            .aside_width {
-                display: none;
-            }
-
             .do_fixed {
                 display: none;
             }
@@ -71,6 +72,14 @@ function ringo_do_skin_set() {
             }
         `;
     }
+
+    if(window.localStorage.getItem('main_css_sidebar_right') && window.localStorage.getItem('main_css_sidebar_right') === '1') {
+        document.getElementById('ringo_add_style').innerHTML += `
+            .do_fixed {
+                float: right;
+            }
+        `;
+    }
 }
 
 function ringo_load_skin_set() {
@@ -85,6 +94,7 @@ function ringo_load_skin_set() {
                 "off_sidebar" : "Turn off sidebar",
                 "fixed_width" : "Fixed width",
                 'default' : 'Default',
+                'sidebar_right' : 'Sidebar direction right'
             }, "ko-KR" : {
                 "save" : "저장",
                 "darkmode" : "다크모드",
@@ -92,6 +102,7 @@ function ringo_load_skin_set() {
                 "off_sidebar" : "사이드바 끄기",
                 "fixed_width" : "고정폭",
                 'default' : '기본값',
+                'sidebar_right' : '사이드바 방향 오른쪽'
             }
         }
 
@@ -141,6 +152,10 @@ function ringo_load_skin_set() {
         }
         select_fixed_width_html += '</select>';
 
+        if(window.localStorage.getItem('main_css_sidebar_right') && window.localStorage.getItem('main_css_sidebar_right') === '1') {
+            set_data["sidebar_right"] = "checked";
+        }
+
         document.getElementById("main_skin_set").innerHTML = ' \
             <input ' + set_data["use_sys_darkmode"] + ' type="checkbox" id="use_sys_darkmode" name="use_sys_darkmode" value="use_sys_darkmode"> ' + set_language[language]['use_sys_darkmode'] + ' \
             <hr class="main_hr"> \
@@ -150,6 +165,8 @@ function ringo_load_skin_set() {
             <hr class="main_hr"> \
             ' + select_fixed_width_html + ' \
             <hr class="main_hr"> \
+            <input ' + set_data["sidebar_right"] + ' type="checkbox" id="sidebar_right" name="sidebar_right" value="sidebar_right"> ' + set_language[language]['sidebar_right'] + ' \
+            <hr class="main_hr"> \
             <button onclick="ringo_get_post();">' + set_language[language]['save'] + '</button> \
         ';
     }