Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style(web): Responsive styles for home page #985

Merged
merged 2 commits into from
Mar 31, 2023
Merged

style(web): Responsive styles for home page #985

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1fc5bc
style(web): Responsive styles for home page
yuedanlabs Mar 30, 2023
662751a
Merge branch 'labring:main' into main
yuedanlabs Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/src/pages/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function HomePage() {
return (appListQuery.data?.data || []).length === 0 ? (
<Empty />
) : (
<div className="w-8/12 mt-10 mx-auto flex flex-col">
<div className="w-11/12 lg:w-8/12 mt-10 mx-auto flex flex-col">
<List
appListQuery={appListQuery}
setShouldRefetch={() => {
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
9 changes: 6 additions & 3 deletions web/src/pages/home/mods/List/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
</div>

<div className="flex flex-col overflow-auto">
<Box bg={bg} className="flex-none flex rounded-lg h-12 items-center px-6 mb-3">
<Box bg={bg} className="flex-none flex rounded-lg h-12 items-center px-3 lg:px-6 mb-3">
<div className="w-3/12 text-second ">{t("HomePanel.Application") + t("Name")}</div>
<div className="w-2/12 text-second ">App ID</div>
<div className="w-2/12 text-second pl-2">{t("HomePanel.State")}</div>
Expand All @@ -95,7 +95,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
<Box
key={item?.appid}
bg={bg}
className="flex rounded-lg py-4 items-center px-6 mb-3 group"
className="flex rounded-lg py-4 items-center px-3 lg:px-6 mb-3 group"
>
<div className="w-3/12 ">
<div className="font-bold text-lg">
Expand All @@ -122,7 +122,10 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
<p className="mt-1">
{t("EndTime")}: {formatDate(item.subscription.expiredAt)}
<CreateAppModal application={item} type="renewal">
<a className="text-primary-500 hidden group-hover:inline ml-2" href="/edit">
<a
className="text-primary-500 invisible group-hover:visible group-hover:inline-block ml-2"
href="/edit"
>
{t("Renew")}
</a>
</CreateAppModal>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
1 change: 0 additions & 1 deletion web/src/pages/home/mods/StatusBadge/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.badgeStyle {
padding: 4px 14px;
text-align: center;
margin-right: 2px;
border-radius: 50px;
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
8 changes: 7 additions & 1 deletion web/src/pages/home/mods/StatusBadge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,13 @@ export default function StatusBadge(props: { statusConditions?: string; state?:
const { statusConditions = APP_PHASE_STATUS.Started, state } = props;
return (
<div className="flex items-center">
<div className={clsx(styles.badgeStyle, styles[colorScheme[statusConditions]])}>
<div
className={clsx(
styles.badgeStyle,
styles[colorScheme[statusConditions]],
"px-2 py-1 lg:px-3",
)}
>
<span>{statusConditions}</span>
</div>
{statusConditions === APP_PHASE_STATUS.Started ||
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down