Skip to content

Commit a49d949

Browse files
akshay2211akshay2211
committed
style: horizontal layout glorified
1 parent 077270f commit a49d949

File tree

5 files changed

+205
-171
lines changed

5 files changed

+205
-171
lines changed

‎app/src/main/java/io/ak1/nytimes/ui/screens/bookmark/BookmarkScreen.kt

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -47,42 +47,50 @@ fun BookmarksScreenComposable(
4747
)
4848

4949
} else {
50-
LazyColumn {
51-
itemsIndexed(resultList.value) { _, element ->
50+
Column(Modifier.fillMaxWidth()) {
51+
LazyColumn(
52+
modifier = Modifier
53+
.width(600.dp)
54+
.fillMaxWidth()
55+
.align(Alignment.CenterHorizontally)
56+
) {
57+
itemsIndexed(resultList.value) { _, element ->
5258

53-
Row(modifier = Modifier
54-
.clickable {
55-
navController.navigate("${MainDestinations.POST_ROUTE}/${element.id}/${MainDestinations.BOOKMARK_ROUTE}")
56-
}
57-
.padding(16.dp, 0.dp)
58-
.height(88.dp)) {
59-
Image(
60-
painter = rememberCoilPainter(
61-
request = element.urlLarge,
62-
previewPlaceholder = android.R.color.darker_gray,
63-
fadeIn = true
64-
), contentDescription = element.title,
65-
contentScale = ContentScale.Crop,
66-
modifier = Modifier
67-
.size(72.dp)
68-
.clip(CircleShape)
69-
.align(Alignment.CenterVertically)
70-
)
71-
Text(
72-
text = element.title ?: "empty",
73-
style = MaterialTheme.typography.h6,
74-
maxLines = 2,
75-
overflow = TextOverflow.Ellipsis,
76-
modifier = Modifier
77-
.padding(16.dp, 0.dp, 0.dp, 0.dp)
78-
.align(Alignment.CenterVertically)
79-
.fillMaxWidth()
59+
Row(modifier = Modifier
60+
.clickable {
61+
navController.navigate("${MainDestinations.POST_ROUTE}/${element.id}/${MainDestinations.BOOKMARK_ROUTE}")
62+
}
8063

81-
)
64+
.padding(16.dp, 0.dp)
65+
.height(88.dp)) {
66+
Image(
67+
painter = rememberCoilPainter(
68+
request = element.urlLarge,
69+
previewPlaceholder = android.R.color.darker_gray,
70+
fadeIn = true
71+
), contentDescription = element.title,
72+
contentScale = ContentScale.Crop,
73+
modifier = Modifier
74+
.size(72.dp)
75+
.clip(CircleShape)
76+
.align(Alignment.CenterVertically)
77+
)
78+
Text(
79+
text = element.title ?: "empty",
80+
style = MaterialTheme.typography.h6,
81+
maxLines = 2,
82+
overflow = TextOverflow.Ellipsis,
83+
modifier = Modifier
84+
.padding(16.dp, 0.dp, 0.dp, 0.dp)
85+
.align(Alignment.CenterVertically)
86+
.fillMaxWidth()
8287

83-
}
84-
Spacer(Modifier.height(16.dp))
88+
)
8589

90+
}
91+
Spacer(Modifier.height(16.dp))
92+
93+
}
8694
}
8795
}
8896
}

‎app/src/main/java/io/ak1/nytimes/ui/screens/components/PostElementExpanded.kt

Lines changed: 60 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,16 @@ import io.ak1.nytimes.model.Results
2929
import io.ak1.nytimes.utility.timeAgo
3030

3131
@Composable
32-
fun PostElementExpanded(results: State<Results>) {
32+
fun PostElementExpanded(results: State<Results>, modifier: Modifier) {
3333
val story = results.value
3434
val context = LocalContext.current
35-
LazyColumn(
36-
Modifier
37-
.fillMaxWidth()
38-
.padding(16.dp)
39-
) {
35+
LazyColumn(modifier) {
4036
val keepTagsHidden = true
4137
item {
42-
Card(elevation = 5.dp) {
38+
Card(
39+
elevation = 5.dp, modifier = Modifier
40+
.padding(16.dp)
41+
) {
4342
Image(
4443
painter = rememberCoilPainter(
4544
request = story.urlLarge,
@@ -53,72 +52,74 @@ fun PostElementExpanded(results: State<Results>) {
5352
contentScale = ContentScale.Crop
5453
)
5554
}
56-
Spacer(Modifier.height(16.dp))
57-
58-
59-
Text(
60-
text = story.title ?: "empty",
61-
style = MaterialTheme.typography.h5,
62-
modifier = Modifier
63-
.fillMaxWidth()
64-
)
65-
Spacer(Modifier.height(16.dp))
55+
Column(Modifier.padding(16.dp, 0.dp)) {
6656

67-
Text(
68-
text = story.abstractText ?: "empty",
69-
style = MaterialTheme.typography.body1,
70-
modifier = Modifier
71-
.fillMaxWidth()
72-
)
73-
Spacer(Modifier.height(8.dp))
74-
Text(
75-
text = story.byline?.trim() ?: "",
76-
style = MaterialTheme.typography.caption,
77-
modifier = Modifier
78-
.wrapContentWidth(Alignment.End)
79-
)
57+
Text(
58+
text = story.title ?: "empty",
59+
style = MaterialTheme.typography.h5,
60+
modifier = Modifier
61+
.fillMaxWidth()
62+
)
63+
Spacer(Modifier.height(16.dp))
8064

81-
Spacer(Modifier.height(8.dp))
82-
Text(
83-
text = story.publishedDate.timeAgo(),
84-
style = MaterialTheme.typography.caption,
85-
modifier = Modifier
86-
.wrapContentWidth(Alignment.End)
87-
)
65+
Text(
66+
text = story.abstractText ?: "empty",
67+
style = MaterialTheme.typography.body1,
68+
modifier = Modifier
69+
.fillMaxWidth()
70+
)
71+
Spacer(Modifier.height(8.dp))
72+
Text(
73+
text = story.byline?.trim() ?: "",
74+
style = MaterialTheme.typography.caption,
75+
modifier = Modifier
76+
.wrapContentWidth(Alignment.End)
77+
)
8878

89-
val tags = story.desFacet.trim().split(",")
90-
if (!keepTagsHidden) {
91-
LazyRow(
79+
Spacer(Modifier.height(8.dp))
80+
Text(
81+
text = story.publishedDate.timeAgo(),
82+
style = MaterialTheme.typography.caption,
9283
modifier = Modifier
93-
.padding(0.dp, 0.dp, 0.dp, 16.dp)
94-
) {
95-
items(tags) {
96-
Text(
97-
text = it,
98-
style = MaterialTheme.typography.caption,
99-
modifier = Modifier
100-
.padding(16.dp, 0.dp, 0.dp, 0.dp)
101-
.wrapContentSize()
102-
.background(
103-
MaterialTheme.colors.secondary,
104-
RoundedCornerShape(20.dp)
105-
)
106-
.padding(18.dp, 10.dp)
107-
)
84+
.wrapContentWidth(Alignment.End)
85+
)
10886

109-
}
87+
val tags = story.desFacet.trim().split(",")
88+
if (!keepTagsHidden) {
89+
LazyRow(
90+
modifier = Modifier
91+
.padding(0.dp, 0.dp, 0.dp, 16.dp)
92+
) {
93+
items(tags) {
94+
Text(
95+
text = it,
96+
style = MaterialTheme.typography.caption,
97+
modifier = Modifier
98+
.padding(16.dp, 0.dp, 0.dp, 0.dp)
99+
.wrapContentSize()
100+
.background(
101+
MaterialTheme.colors.secondary,
102+
RoundedCornerShape(20.dp)
103+
)
104+
.padding(18.dp, 10.dp)
105+
)
106+
107+
}
110108

111109

110+
}
112111
}
112+
113113
}
114-
Spacer(Modifier.height(16.dp))
114+
115115
Button(
116116
onClick = {
117117
Intent(Intent.ACTION_VIEW, Uri.parse(story.shortUrl ?: "")).let {
118118
context.startActivity(it)
119119
}
120-
},
121-
modifier = Modifier.wrapContentWidth()
120+
}, modifier = Modifier
121+
.padding(16.dp)
122+
.wrapContentWidth()
122123
) {
123124
Image(
124125
painter = painterResource(R.drawable.ic_external_link),

‎app/src/main/java/io/ak1/nytimes/ui/screens/home/HomeScreen.kt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ package io.ak1.nytimes.ui.screens.home
22

33
import androidx.compose.foundation.layout.Column
44
import androidx.compose.foundation.layout.fillMaxSize
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.width
57
import androidx.compose.foundation.lazy.LazyColumn
68
import androidx.compose.foundation.lazy.LazyListState
79
import androidx.compose.foundation.lazy.itemsIndexed
@@ -10,7 +12,9 @@ import androidx.compose.runtime.Composable
1012
import androidx.compose.runtime.livedata.observeAsState
1113
import androidx.compose.runtime.mutableStateOf
1214
import androidx.compose.runtime.saveable.rememberSaveable
15+
import androidx.compose.ui.Alignment
1316
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.unit.dp
1418
import androidx.navigation.NavController
1519
import com.google.accompanist.swiperefresh.SwipeRefresh
1620
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
@@ -52,6 +56,10 @@ fun HomeScreenComposable(
5256
onRefresh = {
5357
stories.refresh.invoke()
5458
},
59+
modifier = Modifier
60+
.width(600.dp)
61+
.fillMaxWidth()
62+
.align(Alignment.CenterHorizontally)
5563
) {
5664
when (networkState.value.state) {
5765
State.RUNNING -> {

‎app/src/main/java/io/ak1/nytimes/ui/screens/post/PostScreen.kt

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@ package io.ak1.nytimes.ui.screens.post
33
import android.widget.Toast
44
import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.fillMaxSize
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.width
68
import androidx.compose.runtime.Composable
79
import androidx.compose.runtime.livedata.observeAsState
810
import androidx.compose.runtime.mutableStateOf
911
import androidx.compose.runtime.remember
1012
import androidx.compose.runtime.rememberCoroutineScope
13+
import androidx.compose.ui.Alignment
1114
import androidx.compose.ui.Modifier
1215
import androidx.compose.ui.platform.LocalContext
16+
import androidx.compose.ui.unit.dp
1317
import androidx.navigation.NavController
1418
import io.ak1.nytimes.R
1519
import io.ak1.nytimes.model.Results
@@ -45,7 +49,13 @@ fun PostScreenComposable(
4549
viewModel.addBookmark(story.value, coroutineScope)
4650
}
4751
}
48-
PostElementExpanded(results = story)
52+
PostElementExpanded(
53+
results = story,
54+
modifier = Modifier
55+
.width(600.dp)
56+
.fillMaxWidth()
57+
.align(Alignment.CenterHorizontally)
58+
)
4959
}
5060
CustomAlertDialog(
5161
titleId = R.string.deletion_confirmation,

0 commit comments

Comments
 (0)