<!doctype html> <html data-theme="light" class="has-navbar-fixed-top"> <head> <title>{{ tmp }} - {{ title }}</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- CSS Reset --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> th { text-align: left; margin: 0px; padding: 5px 0px 5px 0px; } table { width: 100%; /* Ensure the table takes full width of its container */ border-collapse: collapse; /* Collapse the borders of the table */ } #data { width: 100%; border-collapse: collapse; } .name-class { max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* #data th:nth-child(3), #data td:nth-child(3) { max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } */ .center-table { overflow-x: auto; } td { padding: 0px 0px 0px 0px; margin-left: 10px; height: 50px; min-width: 55px; display: table-cell; white-space: nowrap; /* Prevent text wrapping */ overflow: hidden; /* Hide overflow content */ text-overflow: ellipsis; /* Display ellipsis for overflow content */ } .hidden-mobile { display: table-cell; } .table-container { overflow-x: auto; /* Enable horizontal scrolling */ } .table-wrapper { overflow-x: auto; /* Enable horizontal scrolling */ } @media only screen and (min-width: 600px) { .hidden-desktop { display: none; } } @media only screen and (max-width: 600px) { table { width: auto; /* Expand table to full width on mobile */ table-layout: fixed; } /* #data th:nth-child(2), #data td:nth-child(2) { width: auto; /* Allow "Name" column to adjust width based on content } */ .center-table { overflow-x: auto; /* Enable horizontal scrolling */ } .fixed-width { width: 100%; } td:first-child { position: sticky; left: 0; z-index: 1; background-color: #fff; /* Make the first column background white */ } .hidden-mobile { display: none; } } .centered-cell { text-align: center; /* Center the content horizontally within the cell */ } .highlighted { background-color: yellow; /* Adjust as needed */ } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .header { width:100%; text-align:center; z-index: 99; background-color: white; } .content { padding: 16px; } /* Table */ td img{ display: block; margin-left: auto; margin-right: 5px; } .inputContainer { display: inline-block; /* Display as an inline block */ vertical-align: middle; /* Center vertically within the cell */ width: 120px; } .inputContainer form { margin: 5% auto 5% auto; } .inputField { display: flex; align-items: center; /* Align items vertically */ width: 100%; /* Ensure inputField fills out inputContainer */ height: 100%; /* Ensure inputField fills out inputContainer */ } .inputField input { flex: 1; width: 70%; padding: 0px; margin: auto 2.5px auto 2.5px; } .inputField button { width: 30%; padding: 0px; margin: 0 2.5px 0 2.5px; } .square-button { background-color: white; border: 1px solid #d1d1d1; } /* Modal Styles */ #lightbox-modal { display: none; position: fixed; z-index: 1000; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .lightbox-wrapper { position: relative; width: 100%; height: 100%; } .lightbox-content { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #lightbox-text { position: absolute; bottom: 20px; /* Adjust as needed */ left: 50%; transform: translateX(-50%); padding: 10px; background-color: rgba(0, 0, 0, 0.5); /* Adjust background color and opacity */ color: white; text-align: center; } #lightbox-modal .close { position: absolute; top: 10px; right: 25px; font-size: 50px; color: white; cursor: pointer; } #lightbox-modal img { display: block; margin: 0 auto; max-width: 90%; max-height: 90%; } </style> </head> <body> <nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> Home </a> <a class="navbar-item" href="/create"> Add Set </a> <a class="navbar-item hidden-desktop" id="expand-button"> Expand Columns </a> </div> <div id="navMenu" class="navbar-menu"> <div class="navbar-start"> </div> <div class="navbar-end"> </div> </div> </nav> <div class="container"> <center> <h1 class="title">{{ tmp }} - {{ title }}</h1> <img class="lightbox-trigger" id="cover" style='height: 150px; width: auto; object-fit: contain' src="/static/sets/{{ tmp }}.jpg" alt="{{ tmp }} - {{ title }}"> {% block content %}{% endblock %} </div> {% block scripts %}{% endblock %} </body> </html>