lock: shrink media if small screen

config/LockConfig.qml

@@ -11,8 +11,11 @@ JsonObject {
         property int weatherWidth: 400
         property int weatherHeight: 100
         property int mediaWidth: 600
+        property int mediaWidthSmall: 450
         property int mediaHeight: 170
+        property int mediaHeightSmall: 150
         property int mediaCoverSize: 150
+        property int mediaCoverSizeSmall: 120
         property int mediaCoverBorder: 3
     }
 }

modules/lock/Backgrounds.qml

@@ -269,8 +269,8 @@ Item {
         ShapePath {
             id: mediaPath
 
-            property int width: root.locked ? Config.lock.sizes.mediaWidth - Config.lock.sizes.border / 4 : 0
+            property int width: root.locked ? (root.isLarge ? Config.lock.sizes.mediaWidth : Config.lock.sizes.mediaWidthSmall) - Config.lock.sizes.border / 4 : 0
-            property real height: root.locked ? Config.lock.sizes.mediaHeight : 0
+            property real height: root.locked ? (root.isLarge ? Config.lock.sizes.mediaHeight : Config.lock.sizes.mediaHeightSmall) : 0
 
             readonly property real rounding: Appearance.rounding.large * 2
             readonly property real roundingX: width < rounding * 2 ? width / 2 : rounding

modules/lock/MediaPlaying.qml

@@ -11,8 +11,8 @@ RowLayout {
 
     required property bool isLarge
 
-    spacing: Appearance.spacing.large * 2
+    spacing: Appearance.spacing.large * (isLarge ? 2 : 1.5)
-    width: Config.lock.sizes.mediaWidth
+    width: isLarge ? Config.lock.sizes.mediaWidth : Config.lock.sizes.mediaWidthSmall
 
     property real playerProgress: {
         const active = Players.active;
@@ -36,12 +36,13 @@ RowLayout {
     }
 
     Item {
+        Layout.alignment: Qt.AlignVCenter
         Layout.topMargin: root.isLarge ? 0 : Config.lock.sizes.border / 2
         Layout.bottomMargin: root.isLarge ? Config.lock.sizes.border / 2 : 0
         Layout.leftMargin: root.isLarge ? 0 : Config.lock.sizes.border / 2
 
-        implicitWidth: Config.lock.sizes.mediaCoverSize
+        implicitWidth: root.isLarge ? Config.lock.sizes.mediaCoverSize : Config.lock.sizes.mediaCoverSizeSmall
-        implicitHeight: Config.lock.sizes.mediaCoverSize
+        implicitHeight: root.isLarge ? Config.lock.sizes.mediaCoverSize : Config.lock.sizes.mediaCoverSizeSmall
 
         ClippingWrapperRectangle {
             anchors.fill: parent
@@ -101,7 +102,7 @@ RowLayout {
 
                 text: "art_track"
                 color: Colours.palette.m3onSurfaceVariant
-                font.pointSize: Config.lock.sizes.mediaCoverSize * 0.4
+                font.pointSize: (root.isLarge ? Config.lock.sizes.mediaCoverSize : Config.lock.sizes.mediaCoverSizeSmall) * 0.4
             }
 
             Image {
@@ -123,7 +124,7 @@ RowLayout {
         Layout.rightMargin: root.isLarge ? Config.lock.sizes.border / 2 : 0
         Layout.fillWidth: true
 
-        spacing: Appearance.spacing.small
+        spacing: root.isLarge ? Appearance.spacing.small : Appearance.spacing.small / 2
 
         StyledText {
             Layout.fillWidth: true
@@ -131,7 +132,7 @@ RowLayout {
             animate: true
             text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
             color: Colours.palette.m3primary
-            font.pointSize: Appearance.font.size.large
+            font.pointSize: root.isLarge ? Appearance.font.size.large : Appearance.font.size.larger
             elide: Text.ElideRight
         }
 
@@ -141,7 +142,7 @@ RowLayout {
             animate: true
             text: (Players.active?.trackAlbum ?? qsTr("No media")) || qsTr("Unknown album")
             color: Colours.palette.m3outline
-            font.pointSize: Appearance.font.size.larger
+            font.pointSize: root.isLarge ? Appearance.font.size.larger : Appearance.font.size.normal
             elide: Text.ElideRight
         }
 
@@ -151,7 +152,7 @@ RowLayout {
             animate: true
             text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
             color: Colours.palette.m3secondary
-            font.pointSize: Appearance.font.size.larger
+            font.pointSize: root.isLarge ? Appearance.font.size.larger : Appearance.font.size.normal
             elide: Text.ElideRight
         }
 
@@ -165,7 +166,7 @@ RowLayout {
             Slider {
                 id: slider
 
-                Layout.rightMargin: Appearance.spacing.small
+                Layout.rightMargin: root.isLarge ? Appearance.spacing.small : 0
                 Layout.fillWidth: true
                 implicitHeight: Appearance.padding.normal * 3
 
@@ -230,6 +231,7 @@ RowLayout {
             Control {
                 icon: "skip_previous"
                 canUse: Players.active?.canGoPrevious ?? false
+                fontSize: root.isLarge ? Appearance.font.size.extraLarge : Appearance.font.size.large * 1.2
 
                 function onClicked(): void {
                     Players.active?.previous();
@@ -239,6 +241,7 @@ RowLayout {
             Control {
                 icon: Players.active?.isPlaying ? "pause" : "play_arrow"
                 canUse: Players.active?.canTogglePlaying ?? false
+                fontSize: root.isLarge ? Appearance.font.size.extraLarge : Appearance.font.size.large * 1.2
                 primary: true
 
                 function onClicked(): void {
@@ -249,6 +252,7 @@ RowLayout {
             Control {
                 icon: "skip_next"
                 canUse: Players.active?.canGoNext ?? false
+                fontSize: root.isLarge ? Appearance.font.size.extraLarge : Appearance.font.size.large * 1.2
 
                 function onClicked(): void {
                     Players.active?.next();
@@ -262,7 +266,7 @@ RowLayout {
 
         required property string icon
         required property bool canUse
-        property int fontSize: Appearance.font.size.extraLarge
+        required property int fontSize
         property int padding
         property bool fill: true
         property bool primary