Anthony Correa
e96ef0e44e
This commit introduces several enhancements across multiple files to improve maintainability, functionality, and overall code quality. Key updates are as follows:
1. .gitignore
• Added exclusion for kindle/data/* to prevent Kindle-specific data from being tracked.
2. Dockerfile
• Added installation of OpenMoji font:
• Downloads and unzips OpenMoji font to /usr/share/fonts/openmoji.
• Updates font cache with fc-cache.
• Verifies installation with fc-list | grep "OpenMoji".
• Improves container setup for rendering Kindle dashboards with proper font support.
3. compose.yml
• Port mapping now uses an environment variable ${HOST_PORT} instead of hardcoding 56733:80.
• Enhances flexibility for port management.
4. kindle/ascwebdash.py
• Significant refactoring and cleanup:
• Removed unused signal handling and daemonization logic.
• Simplified logging configuration and added optional arguments using argparse for flexibility.
• Abstracted repetitive paths using constants for maintainability.
• Consolidated functionality for fetching images and refreshing the screen.
• Removed unused Wi-Fi and GUI toggling code.
• Focused the script’s functionality on image fetching and display for Kindle extensions.
5. CSS (style.css)
• Removed visual debugging borders (red, green, yellow).
• Improved layout styles:
• Set fixed widths for better rendering of event columns.
• Adjusted margins and paddings for cleaner alignment.
• Added a new .day .events class for consistent padding.
6. views.py
• Added error handling when fetching calendar data:
• Ensures the application doesn’t crash if calendar URLs are inaccessible.
• Logs errors to console for debugging.
Impact:
• Maintainability: Refactored scripts, improved code structure, and enhanced readability.
• Flexibility: Environment variable support for ports and dynamic script arguments.
• Functionality: Added OpenMoji font support in the Docker container.
• UI/UX: Cleaned up CSS for better layout and appearance.
• Resilience: Improved error handling in views.py to handle calendar fetch failures gracefully.
Files Modified:
• .gitignore
• Dockerfile
• compose.yml
• kindle/ascwebdash/bin/asc-webdash.py
• server/app/templates/style.css
• server/app/views.py
This ensures better extensibility and robustness across the codebase.
137 lines
2.8 KiB
CSS
137 lines
2.8 KiB
CSS
@import url('{{ HOST }}:{{ HOST_PORT }}/fonts/weather-icons/weather-icons.css');
|
|
* {
|
|
box-sizing: border-box; /* Include padding and borders in size calculations */
|
|
}
|
|
html, body {
|
|
margin: 0; /* Prevent any default margins */
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
width: 600px;
|
|
height: 800px;
|
|
}
|
|
|
|
.dashboard {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
font-family: sans-serif;
|
|
text-align: left;
|
|
font-size: 17px;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0 auto; /* Center horizontally */
|
|
}
|
|
|
|
.panel.top {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0 1 auto;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.panel.top .splitpanel {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.splitpanel.big-text {
|
|
font-size: 60px;
|
|
font-weight: bold;
|
|
vertical-align: top;
|
|
text-align: right;
|
|
}
|
|
|
|
.splitpanel .weather-icon {
|
|
font-size: 180px;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
.panel.bottom {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel.bottom.week .row {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
height: 50%;
|
|
align-items: stretch; /* Stretch children to fill the width (optional) */
|
|
|
|
}
|
|
|
|
.panel.bottom.week .row .day {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical; /* Old WebKit property for column layout */
|
|
-webkit-box-direction: column; /* Old WebKit property for forward direction */
|
|
-webkit-flex-direction: column; /* Flexbox column direction for modern WebKit */
|
|
flex-direction: column; /* Standard Flexbox column layout */
|
|
border-style: solid;
|
|
margin: 1px;
|
|
justify-content: flex-start; /* Align children at the top */
|
|
text-align: left;
|
|
flex: 1;
|
|
width: 148px;
|
|
}
|
|
|
|
.day .day-title {
|
|
background-color: black;
|
|
text-align: center;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.day .day-title.current-day {
|
|
color: black;
|
|
background-color: white;
|
|
border-bottom: solid black;
|
|
}
|
|
|
|
.day .event {
|
|
background-color: white;
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
padding: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.day .events {
|
|
padding: 2px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
height: 1em;
|
|
}
|
|
|
|
code {
|
|
font-size: .8em;
|
|
} |