By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

Better voting buttons

roundabout,
created on Monday, 4 March 2024, 16:47:38 (1709570858), received on Wednesday, 31 July 2024, 06:54:42 (1722408882)
Author identity: vlad <vlad.muntoiu@gmail.com>

d53bc2b8f2e5ed82f0b361e0484598a2da148f78

static/style.css

@@ -242,4 +242,37 @@ hr {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            #repo-nav {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                padding-left: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        x-buttonbox.segmented {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            box-shadow: var(--shadow-button);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            padding: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            gap: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            overflow: hidden;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-radius: var(--radius-button);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            width: fit-content;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        x-buttonbox.segmented > * {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-radius: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .vote-button:not(.selected) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            box-shadow: none !important;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            color: inherit !important;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background: transparent !important;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            outline: 0.1px solid #00000080;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .vote-button:not(.selected):hover {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background: var(--color-flat-button-hover) !important;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .vote-button {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            padding: 4px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .vote-score {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            min-width: 3ch;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            text-align: center;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/voting.js

@@ -1,11 +1,11 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            function updateButtons(postID, score) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            document.getElementById(postID + "-voteup").classList.add("button-flat");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            document.getElementById(postID + "-votedown").classList.add("button-flat");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            document.getElementById(postID + "-voteup").classList.remove("selected");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            document.getElementById(postID + "-votedown").classList.remove("selected");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                if(score == 1) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                document.getElementById(postID + "-voteup").classList.remove("button-flat");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                document.getElementById(postID + "-voteup").classList.add("selected");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                } else if(score == -1) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                document.getElementById(postID + "-votedown").classList.remove("button-flat");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                document.getElementById(postID + "-votedown").classList.add("selected");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/post.html

@@ -20,10 +20,10 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                {{ post.message }}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            </p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            {% if logged_in_user %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            <x-buttonbox class="box-center">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <button onclick="vote({{ post.number }}, 1);" class="button-flat big-button" id="{{ post.number }}-voteup"><iconify-icon icon="mdi:arrow-up"></iconify-icon></button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <span style="font-size: 1.5em;" id="{{ post.number }}-vote">{{ post.voteSum }}</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <button onclick="vote({{ post.number }}, -1);" class="button-flat big-button" id="{{ post.number }}-votedown"><iconify-icon icon="mdi:arrow-down"></iconify-icon></button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            <x-buttonbox class="box-center segmented">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <button onclick="vote({{ post.number }}, 1);" class="vote-button big-button" id="{{ post.number }}-voteup"><iconify-icon icon="mdi:arrow-up"></iconify-icon></button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <span style="font-size: 1.5em;" class="vote-score" id="{{ post.number }}-vote">{{ post.voteSum }}</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                                <button onclick="vote({{ post.number }}, -1);" class="vote-button big-button" id="{{ post.number }}-votedown"><iconify-icon icon="mdi:arrow-down"></iconify-icon></button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                    <script>vote({{ post.number }}, 0);</script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                                </x-buttonbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            {% endif %}