update ringo skin

views/ringo/css/main.css

@@ -63,6 +63,46 @@ header a#logo:hover {
     background-color: #95c3df;
 }
 
+.top_cel {
+    display: inline-block;
+}
+
+.top_cel a {
+    display: inline-block;
+    
+    height: 52px;
+    
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.top_cel a:hover {
+    background-color: #95c3df;
+}
+
+.top_cel_in {
+    position: absolute;
+    
+    background: #efd8f7;
+    
+    padding: 10px;
+    
+    line-height: initial;
+
+    z-index: 1;
+}
+
+.top_cel_in a {
+    padding: 0px;
+    
+    display: block;
+    
+    height: inherit;
+
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
 div#menu {
     margin-top: 10px;
 
@@ -89,8 +129,6 @@ input.search {
     
     vertical-align: middle;
     
-    margin-top: -5px;
-    
     border: 0;
     
     padding: 10px;
@@ -112,7 +150,6 @@ button.search_button {
     
     vertical-align: middle;
     
-    margin-top: -5px;
     margin-left: -6px;
     
     border: 0;
@@ -169,6 +206,8 @@ aside .side_button {
 
 aside .side_button:hover {
     background-color: #eee;
+
+    cursor: pointer;
 }
 
 #side_button_2 {
@@ -274,4 +313,10 @@ footer.only_mobile {
     padding: 10px;
     
     background-color: white;
+}
+
+#main_data button:hover {
+    background-color: #eee;
+
+    cursor: pointer;
 }

views/ringo/index.html

@@ -9,6 +9,7 @@
         {% endif %}
         {{imp[3][3]|safe}}
         <script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
+        <script src="/views/ringo/js/main.js?ver=1"></script>
         <link rel="stylesheet" href="/views/ringo/css/main.css?ver=1">
         <link rel="shortcut icon" href="/views/main_css/file/favicon.ico?ver=1">
         {{imp[1][5]|safe}}
@@ -30,30 +31,98 @@
                 <a id="logo" href="/">{{imp[1][4]|safe}}</a>
             </span>
             <span id="right">
-                <span class="top_cel" id="">
-                    <span class="iconify" data-icon="ic:baseline-access-time" data-inline="true"></span>
-                    <span class="not_mobile">{{'list'|load_lang}}</span>
-                    <span class="iconify" data-icon="ic:baseline-arrow-drop-down" data-inline="true"></span>
-                </span>
-                <span class="top_cel" id="">
-                    <span class="iconify" data-icon="ic:baseline-archive" data-inline="true"></span>
-                    <span class="not_mobile">{{'tool'|load_lang}}</span>
-                    <span class="iconify" data-icon="ic:baseline-arrow-drop-down" data-inline="true"></span>
-                </span>
-                <span class="top_cel" id="">
-                    {% if imp[2][2] == 1 %}
-                        {% if imp[2][8] != '0' %}
-                            <span class="iconify" data-icon="ic:baseline-add-alert" data-inline="true"></span>
+                <div class="top_cel" id="recent_cel">
+                    <a href="javascript:ringo_opening('recent_cel_in');">
+                        <span class="iconify" data-icon="ic:baseline-access-time" data-inline="true"></span>
+                        <span class="not_mobile">{{'list'|load_lang}}</span>
+                        <span class="iconify" data-icon="ic:baseline-arrow-drop-down" data-inline="true"></span>
+                    </a>
+                    <div class="top_cel_in" id="recent_cel_in" style="display: none;">
+                        <a href="/recent_changes">
+                            <span class="iconify" data-icon="ic:baseline-autorenew" data-inline="true"></span>
+                            {{'recent_change'|load_lang}}
+                        </a>
+                        <a href="/recent_discuss">
+                            <span class="iconify" data-icon="ic:baseline-add-comment" data-inline="true"></span>
+                            {{'recent_discussion'|load_lang}}
+                        </a>
+                        <a href="/vote">
+                            <span class="iconify" data-icon="ic:baseline-how-to-vote" data-inline="true"></span>
+                            {{'vote_list'|load_lang}}
+                        </a>
+                    </div>
+                </div>
+                <div class="top_cel" id="other_cel">
+                    <a href="javascript:ringo_opening('other_cel_in');">
+                        <span class="iconify" data-icon="ic:baseline-archive" data-inline="true"></span>
+                        <span class="not_mobile">{{'tool'|load_lang}}</span>
+                        <span class="iconify" data-icon="ic:baseline-arrow-drop-down" data-inline="true"></span>
+                    </a>
+                    <div class="top_cel_in" id="other_cel_in" style="display: none;">
+                        <a href="/random">
+                            <span class="iconify" data-icon="ic:baseline-shuffle" data-inline="true"></span>
+                            {{'random'|load_lang}}
+                        </a>
+                        <a href="/other">
+                            <span class="iconify" data-icon="ic:baseline-build" data-inline="true"></span>
+                            {{'other_tool'|load_lang}}
+                        </a>
+                        {% if imp[2][9] != '0' %}
+                            <a href="/manager">
+                                <span class="iconify" data-icon="ic:baseline-how-to-reg" data-inline="true"></span>
+                                {{'admin_tool'|load_lang}}
+                            </a>
+                        {% endif %}
+                        <a href="/upload">
+                            <span class="iconify" data-icon="ic:baseline-cloud-upload" data-inline="true"></span>
+                            {{'upload'|load_lang}}
+                        </a>
+                        <a href="/skin_set">
+                            <span class="iconify" data-icon="ic:baseline-settings" data-inline="true"></span>
+                            {{'skin_setting'|load_lang}}
+                        </a>
+                    </div>
+                </div>
+                <div class="top_cel" id="user_cel">
+                    <a href="javascript:ringo_opening('user_cel_in');">
+                        {% if imp[2][2] == 1 %}
+                            {% if imp[2][8] != '0' %}
+                                <span class="iconify" data-icon="ic:baseline-add-alert" data-inline="true"></span>
+                            {% else %}
+                                <span class="iconify" data-icon="ic:baseline-person-add" data-inline="true"></span>
+                            {% endif %}
                         {% else %}
-                            <span class="iconify" data-icon="ic:baseline-person-add" data-inline="true"></span>
+                            <span class="iconify" data-icon="ic:round-person-search" data-inline="true"></span>
                         {% endif %}
-                    {% else %}
-                        <span class="iconify" data-icon="ic:round-person-search" data-inline="true"></span>
-                    {% endif %}
-                    <span class="not_mobile">{{'tool'|load_lang}}</span>
-                    <span class="iconify" data-icon="ic:baseline-arrow-drop-down" data-inline="true"></span>
-                </span>
-                <form class="not_mobile" method="post" action="/search" role="search">
+                        <span class="not_mobile">{{'tool'|load_lang}}</span>
+                        <span class="iconify" data-icon="ic:baseline-arrow-drop-down" data-inline="true"></span>
+                    </a>
+                    <div class="top_cel_in" id="user_cel_in" style="display: none;">
+                        <a href="/random">
+                            <span class="iconify" data-icon="ic:baseline-shuffle" data-inline="true"></span>
+                            {{'random'|load_lang}}
+                        </a>
+                        <a href="/other">
+                            <span class="iconify" data-icon="ic:baseline-build" data-inline="true"></span>
+                            {{'other_tool'|load_lang}}
+                        </a>
+                        {% if imp[2][9] != '0' %}
+                            <a href="/manager">
+                                <span class="iconify" data-icon="ic:baseline-how-to-reg" data-inline="true"></span>
+                                {{'admin_tool'|load_lang}}
+                            </a>
+                        {% endif %}
+                        <a href="/upload">
+                            <span class="iconify" data-icon="ic:baseline-cloud-upload" data-inline="true"></span>
+                            {{'upload'|load_lang}}
+                        </a>
+                        <a href="/skin_set">
+                            <span class="iconify" data-icon="ic:baseline-settings" data-inline="true"></span>
+                            {{'skin_setting'|load_lang}}
+                        </a>
+                    </div>
+                </div>
+                <form class="not_mobile" method="post" action="/search" role="search" id="search">
                     <input class="not_mobile search" name="search" placeholder="{{'search'|load_lang}}" autocomplete="off" type="search">
                     <button type="submit" id="goto" formaction="/goto" class="search_button">
                         <span class="iconify" data-icon="ic:round-find-in-page" data-inline="true"></span>

views/ringo/js/main.js

@@ -0,0 +1,44 @@
+let ringo_save_data = '';
+let ringo_open = 0;
+
+function ringo_opening(data) {
+    ringo_save_data = data;
+
+    console.log(data);
+    let element = [data];
+    
+    let menu_list = [
+        'recent_cel_in',
+        'other_cel_in',
+        'user_cel_in'
+    ];
+    for(for_a in menu_list) {
+        if(menu_list[for_a] !== data) {
+            element.push(menu_list[for_a]);
+        }
+    }
+
+    console.log(element);
+
+    if(document.getElementById(element[0]).style.display == 'none') {
+        document.getElementById(element[0]).style.display = 'block';
+
+        for(for_a in element) {
+            if(for_a !== '0') {
+                console.log(for_a);
+                document.getElementById(element[for_a]).style.display = 'none';
+            }
+        }
+    } else {
+        document.getElementById(element[0]).style.display = 'none';
+    }
+
+    ringo_open = 1;
+    setTimeout(function() { ringo_open = 0; }, 100);
+}
+
+document.onclick = function(event) {
+    if(ringo_save_data !== '' && ringo_open == 0) {
+        document.getElementById(ringo_save_data).style.display = 'none';
+    }
+}