make the ui slimmer

make the cards smaller
always align forecast item in center
use fixed size tab buttons

src/css/style.css

@@ -2,7 +2,7 @@
     font-size: 30px;
 }
 .main_temp_label {
-    font-size: 4rem;
+    font-size: 3.7rem;
 }
 
 .btn_sm{
@@ -23,9 +23,19 @@
 .text-l4{
     font-size: 2.5rem;
 }
-.text-1{
+.text-l5{
+    font-size: 2.35rem;
+}
+.text-l6{
+    font-size: 2.2rem;
+}
+.text-l6{
     font-size: 2rem;
 }
+
+.text-1{
+    font-size: 2.2rem;
+}
 .text-2a{
     font-size: 1.8rem;
 }
@@ -136,7 +146,7 @@
 }
 
 .custom_card_forecast_item{
-    padding: 0.15rem 1.5rem;
+    padding: 0.12rem 1.5rem;
     border-radius: .7rem;
 }
 

src/frontendCardAirPollution.py

@@ -50,7 +50,7 @@ def create_card(self):
         )
         card.attach(info_box, 0, 2, 4, 2)
         info_box.set_margin_start(10)
-        info_box.set_margin_top(30)
+        info_box.set_margin_top(20)
 
         main_val = Gtk.Label(label=self.air_apllution_data["hourly"]["us_aqi"][idx])
         main_val.set_css_classes(["text-l3", "bold"])

src/frontendCardDayNight.py

@@ -67,7 +67,7 @@ def create_card(self):
         card.set_css_classes(["view", "card", "custom_card"])
 
         # Main title of the card
-        title = Gtk.Label(label="Sunset & Sunrise")
+        title = Gtk.Label(label="Sunrise & Sunset")
         title.set_hexpand(True)
         title.set_halign(Gtk.Align.START)
         title.set_css_classes(["text-4", "light-3", "bold"])
@@ -86,13 +86,14 @@ def create_card(self):
         card_info.attach(sun_rise_label, 0, 1, 1, 2)
 
         sun_rise = Gtk.Label(label=self.sun_rise)
+        sun_rise.set_margin_top(10)
         sun_rise.set_css_classes(["text-2a", "bold", "light-2"])
         sun_rise.set_halign(Gtk.Align.START)
         card_info.attach(sun_rise, 0, 2, 3, 3)
 
         sun_set_label = Gtk.Label(label="Sunset")
         sun_set_label.set_halign(Gtk.Align.START)
-        sun_set_label.set_margin_top(40)
+        sun_set_label.set_margin_top(20)
         sun_set_label.set_css_classes(["text-4", "light-4"])
         card_info.attach(sun_set_label, 0, 4, 1, 2)
 
@@ -105,6 +106,6 @@ def create_card(self):
         card_icon.set_css_classes(["view", "card_infao"])
         card.attach(card_icon, 1, 2, 2, 1)
 
-        obj = DrawDayNight(self.degree, 220, 120)
+        obj = DrawDayNight(self.degree, 200, 100)
         card_icon.attach(obj.img_box, 0, 1, 1, 1)
 

src/frontendCardSquare.py

@@ -61,7 +61,7 @@ def create_card(self):
         card.attach(title, 0, 0, 1, 2)
 
         # Info Grid: It contains - Main value,units, short description, sub description
-        card_info = Gtk.Grid(margin_top=15, row_spacing=0, column_spacing=5)
+        card_info = Gtk.Grid(margin_top=5, row_spacing=0, column_spacing=0)
 
         card_info.set_css_classes(["view"])
         card.attach(card_info, 0, 2, 1, 2)
@@ -81,7 +81,7 @@ def create_card(self):
 
         # Short description
         desc_box = Gtk.Box()
-        desc_box.set_size_request(10, 40)
+        desc_box.set_size_request(10, 30)
         card_info.attach(desc_box, 0, 4, 6, 1)
 
         desc = Gtk.Label(label=self.desc)
@@ -104,7 +104,7 @@ def create_card(self):
         card_info.attach(sub_desc, 0, 6, 4, 1)
 
         card_icon = Gtk.Grid(halign=Gtk.Align.END)
-        card_icon.set_margin_top(15)
+        card_icon.set_margin_top(5)
         card_icon.set_css_classes(["view", "card_infao"])
         card.attach(card_icon, 1, 2, 2, 1)
 

src/frontendCurrentCond.py

@@ -37,7 +37,7 @@ def paint_ui(self):
 
         icon_main = Gtk.Image().new_from_file(condition_icon)
         icon_main.set_hexpand(True)
-        icon_main.set_pixel_size(130)
+        icon_main.set_pixel_size(110)
         condition_grid.attach(icon_main, 0, 0, 1, 2)
 
         # Condition label
@@ -60,7 +60,7 @@ def paint_ui(self):
 
         # ========== right  section ==========
         box_right = Gtk.Box(
-            orientation=Gtk.Orientation.VERTICAL, margin_top=30, margin_end=5
+            orientation=Gtk.Orientation.VERTICAL, margin_top=45, margin_end=5
         )
         self.attach(box_right, 1, 0, 1, 1)
 

src/frontendForecast.py

@@ -31,13 +31,15 @@ def paint_ui(self):
         style_buttons_box.set_valign(Gtk.Align.CENTER)
 
         tomorrow_btn = Gtk.ToggleButton.new_with_label(_('Tomorrow'))
-        tomorrow_btn.set_css_classes(['pill', 'btn_sm'])
+        tomorrow_btn.set_size_request(100,20)
+        tomorrow_btn.set_css_classes(['btn_sm'])
         tomorrow_btn.do_clicked(tomorrow_btn)
         style_buttons_box.append(tomorrow_btn)
         tomorrow_btn.connect('clicked', self._on_tomorrow_forecast_btn_clicked)
 
         weekly_btn = Gtk.ToggleButton.new_with_label(_('Weekly'))
-        weekly_btn.set_css_classes(['pill', 'btn_sm'])
+        weekly_btn.set_size_request(100,20)
+        weekly_btn.set_css_classes(['btn_sm'])
         weekly_btn.set_group(tomorrow_btn)
         style_buttons_box.append(weekly_btn)
         weekly_btn.connect('clicked', self._on_weekly_btn_forecast_btn_clicked)
@@ -80,7 +82,7 @@ def page_stacks(self, page_name):
         scrolled_window = Gtk.ScrolledWindow(margin_top=8,margin_bottom=8)
         scrolled_window.set_policy(
             Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC)
-        scrolled_window.set_size_request(300, 550)
+        scrolled_window.set_size_request(300, 535)
         scrolled_window.set_kinetic_scrolling(True)
         box.append(scrolled_window)
 
@@ -122,9 +124,13 @@ def page_stacks(self, page_name):
                     d_t = _('Tomorrow')
 
             # Add d_t Label
+            label_box = Gtk.Box(margin_top=0, margin_bottom=0)
+            label_box.set_size_request(80, 20)
+            # label_box.set_css_classes(['card_info'])
             label_day_time = Gtk.Label(label=d_t, halign=Gtk.Align.START)
+            label_box.append(label_day_time)
             label_day_time.set_css_classes(['text-4', 'bold-2'])
-            forecast_item_grid.attach(label_day_time, 0, 0, 1, 1)
+            forecast_item_grid.attach(label_box, 0, 0, 1, 1)
 
             # Condition Icon
             # if it is night
@@ -133,10 +139,10 @@ def page_stacks(self, page_name):
                     condition_icon = icons[str(weather_code)+'n'] 
 
             icon_main = Gtk.Image().new_from_file(condition_icon)
-            icon_main.set_halign(Gtk.Align.END)
+            icon_main.set_halign(Gtk.Align.CENTER)
             icon_main.set_hexpand(True)
             icon_main.set_pixel_size(50)
-            icon_main.set_margin_end(30)
+            icon_main.set_margin_end(0)
             forecast_item_grid.attach(icon_main, 1, 0, 1, 1)
 
             forecast_cond_grid = Gtk.Grid(valign=Gtk.Align.CENTER,margin_end = 20)

src/frontendHourlyDetails.py

@@ -45,21 +45,24 @@ def paint_ui(self):
 
         # Temperature Button -------------
         temp_btn = Gtk.ToggleButton.new_with_label(_("Hourly"))
-        temp_btn.set_css_classes(["pill", "btn_sm"])
+        temp_btn.set_size_request(100,20)
+        temp_btn.set_css_classes(["btn_sm"])
         temp_btn.do_clicked(temp_btn)
         style_buttons_box.append(temp_btn)
         temp_btn.connect("clicked", self._on_btn_clicked, "hourly")
 
         # Wind Button -------------
         wind_btn = Gtk.ToggleButton.new_with_label(_("Wind"))
-        wind_btn.set_css_classes(["pill", "btn_sm"])
+        wind_btn.set_size_request(100,20)
+        wind_btn.set_css_classes(["btn_sm"])
         wind_btn.set_group(temp_btn)
         style_buttons_box.append(wind_btn)
         wind_btn.connect("clicked", self._on_btn_clicked, "wind")
 
         # Precipitation Button -------------
         prec_btn = Gtk.ToggleButton.new_with_label(_("Precipitation"))
-        prec_btn.set_css_classes(["pill", "btn_sm"])
+        prec_btn.set_size_request(100,20)
+        prec_btn.set_css_classes(["btn_sm"])
         prec_btn.set_group(temp_btn)
         style_buttons_box.append(prec_btn)
         prec_btn.connect("clicked", self._on_btn_clicked, "prec")
@@ -94,7 +97,7 @@ def create_stack_page(self, page_name):
             label=str(max(hourly_data.windspeed_10m.get("data")[:24])),
             halign=Gtk.Align.START,
         )
-        val_label.set_css_classes(["text-l4", "light-3", "bold-1"])
+        val_label.set_css_classes(["text-l5", "light-3", "bold-1"])
         info_grid.attach(val_label, 0, 1, 2, 2)
         unit_label = Gtk.Label(label=hourly_data.windspeed_10m.get("unit"))
         unit_label.set_css_classes(["text-5", "light-2", "bold-3"])

src/frontendUiDrawDayNight.py

@@ -6,9 +6,7 @@
 import cairo
 from datetime import datetime
 import time
-from .utils import get_cords, get_tz_offset_by_cord,get_my_tz_offset_from_utc
-
-my_tz_offset = get_my_tz_offset_from_utc()
+from .utils import get_local_time
 
 class DrawDayNight:
     def __init__(self,angle,width,height):
@@ -29,7 +27,7 @@ def __init__(self,angle,width,height):
     def on_draw(self, widget, cr, width, height, data):
          # Create a Cairo surface
         context = cr
-        outer_radius = 50
+        outer_radius = 43
 
         num_rays = 8
         sun_angle = self.angle_degrees  #Degree
@@ -72,10 +70,7 @@ def on_draw(self, widget, cr, width, height, data):
         context.set_font_size(13)
         context.set_source_rgba(0.7, 0.7, 0.7, 1.0)  # Black
 
-        tz_offset_from_curr_tz = get_tz_offset_by_cord(*get_cords())
-
-        now = time.time() + my_tz_offset + tz_offset_from_curr_tz
-        formatted_date_time = datetime.fromtimestamp(now).strftime("%I:%M %p")
+        formatted_date_time = datetime.fromtimestamp(get_local_time()).strftime("%I:%M %p")
         text = formatted_date_time
 
         # Calculate the position for text placement

src/mousam.py

@@ -33,7 +33,7 @@ def __init__(self, *args, **kwargs):
 
         self.main_window = self
         self.settings = Gio.Settings(schema_id="io.github.amit9838.mousam")
-        self.set_default_size(1220, 800)
+        self.set_default_size(1160, 750)
         self.set_title("")
         #  Adding a button into header
         self.header = Adw.HeaderBar()
@@ -106,8 +106,8 @@ def show_loader(self):
                 return
 
         container_loader = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
-        container_loader.set_margin_top(250)
-        container_loader.set_margin_bottom(300)
+        container_loader.set_margin_top(220)
+        container_loader.set_margin_bottom(290)
 
         # Create loader
         loader = Gtk.Spinner()

src/utils.py

@@ -2,6 +2,7 @@
 import socket
 import json
 from datetime import datetime, timedelta, timezone
+import time
 from gi.repository import Adw, Gio
 
 current_weather_data = None
@@ -21,7 +22,7 @@
 def check_internet_socket():
     try:
         socket.create_connection(("1.1.1.1", 53), timeout=TIMEOUT)  # 53 is the DNS port
-        print("Internet conncetion confirmed through socket connection")
+        print("Internet connection confirmed through socket connection")
         return True
     except OSError:
         return False
@@ -31,7 +32,7 @@ def check_internet_socket():
 def check_internet_domain(url):
     try:
         request = requests.get(url, timeout=TIMEOUT)
-        print("Internet conncetion confirmed through: ",url)
+        print("Internet connection confirmed through: ",url)
         return True
     except (requests.ConnectionError, requests.Timeout) as exception:
         return False
@@ -115,3 +116,7 @@ def get_tz_offset_by_cord(lat, lon):
             epoch_offset *= -1
 
     return epoch_offset
+
+
+def get_local_time():
+    return time.time() + get_my_tz_offset_from_utc() + get_tz_offset_by_cord(*get_cords())