Dynamically compute classroom card width

oppia · Jul 24, 2024 · a168b57 · a168b57
1 parent 1ccadd3
commit a168b57
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/app/src/main/java/org/oppia/android/app/classroom/classroomlist/ClassroomList.kt b/app/src/main/java/org/oppia/android/app/classroom/classroomlist/ClassroomList.kt
@@ -19,12 +19,15 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.integerResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.oppia.android.R
@@ -73,7 +76,7 @@ fun ClassroomCard(
   val isCardSelected = classroomSummaryViewModel.classroomSummary.classroomId == selectedClassroomId
   Card(
     modifier = Modifier
-      .width(dimensionResource(id = R.dimen.classrooms_card_width))
+      .width(getClassroomCardWidth())
       .padding(
         start = dimensionResource(R.dimen.classrooms_card_margin_start),
         end = dimensionResource(R.dimen.classrooms_card_margin_end),
@@ -126,3 +129,17 @@ fun ClassroomCard(
     }
   }
 }
+
+@Composable
+fun getClassroomCardWidth(): Dp {
+  val configuration = LocalConfiguration.current
+  val screenWidth = configuration.screenWidthDp.dp
+  val horizontalPadding = dimensionResource(id = R.dimen.classrooms_text_margin_start)
+  val topicCardHorizontalMargin = 8.dp
+  val topicListSpanCount = integerResource(id = R.integer.home_span_count)
+
+  val totalTopicCardWidth = screenWidth -
+    (horizontalPadding.times(2) + (topicCardHorizontalMargin * (topicListSpanCount - 1) * 2))
+
+  return totalTopicCardWidth.div(topicListSpanCount)
+}
diff --git a/app/src/main/res/values-land/dimens.xml b/app/src/main/res/values-land/dimens.xml
@@ -552,6 +552,9 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">72dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
+  <dimen name="classrooms_card_padding_vertical">36dp</dimen>
+  <dimen name="classrooms_card_icon_padding_bottom">28dp</dimen>
+  <dimen name="classrooms_card_icon_size">80dp</dimen>
   <dimen name="classrooms_card_margin_start">8dp</dimen>
   <dimen name="classrooms_card_margin_end">0dp</dimen>
 </resources>
diff --git a/app/src/main/res/values-sw600dp-land/dimens.xml b/app/src/main/res/values-sw600dp-land/dimens.xml
@@ -277,7 +277,7 @@
 
   <!-- All Topics -->
   <dimen name="all_topics_text_margin_start">72dp</dimen>
-  <dimen name="all_topics_text_margin_top">68dp</dimen>
+  <dimen name="all_topics_text_margin_top">48dp</dimen>
   <dimen name="all_topics_text_margin_end">76dp</dimen>
   <dimen name="all_topics_text_margin_bottom">24dp</dimen>
 
@@ -517,6 +517,10 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">72dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
+  <dimen name="classrooms_card_collapsed_padding_vertical">28dp</dimen>
+  <dimen name="classrooms_card_padding_vertical">52dp</dimen>
+  <dimen name="classrooms_card_icon_padding_bottom">32dp</dimen>
+  <dimen name="classrooms_card_icon_size">100dp</dimen>
   <dimen name="classrooms_card_margin_start">0dp</dimen>
-  <dimen name="classrooms_card_margin_end">8dp</dimen>
+  <dimen name="classrooms_card_margin_end">16dp</dimen>
 </resources>
diff --git a/app/src/main/res/values-sw600dp-port/dimens.xml b/app/src/main/res/values-sw600dp-port/dimens.xml
@@ -282,7 +282,7 @@
 
   <!-- All Topics -->
   <dimen name="all_topics_text_margin_start">60dp</dimen>
-  <dimen name="all_topics_text_margin_top">40dp</dimen>
+  <dimen name="all_topics_text_margin_top">32dp</dimen>
   <dimen name="all_topics_text_margin_end">76dp</dimen>
   <dimen name="all_topics_text_margin_bottom">16dp</dimen>
 
@@ -534,6 +534,9 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">60dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
+  <dimen name="classrooms_card_padding_vertical">40dp</dimen>
+  <dimen name="classrooms_card_icon_padding_bottom">28dp</dimen>
+  <dimen name="classrooms_card_icon_size">100dp</dimen>
   <dimen name="classrooms_card_margin_start">8dp</dimen>
-  <dimen name="classrooms_card_margin_end">0dp</dimen>
+  <dimen name="classrooms_card_margin_end">8dp</dimen>
 </resources>