diff options
Diffstat (limited to 'FrontEnd/src/pages')
7 files changed, 34 insertions, 45 deletions
diff --git a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css index df7a6af6..232681c8 100644 --- a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css +++ b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css @@ -1,4 +1,5 @@ -.timeline-edit-image { +.timeline-edit-image-image { max-width: 100px; max-height: 100px; } + diff --git a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx index 4676e45a..c62c8ee5 100644 --- a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx +++ b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx @@ -2,6 +2,8 @@ import classNames from "classnames"; import BlobImage from "~/src/components/BlobImage"; +import "./ImagePostEdit.css"; + interface TimelinePostEditImageProps { file: File | null; onChange: (file: File | null) => void; @@ -13,9 +15,7 @@ export default function ImagePostEdit(props: TimelinePostEditImageProps) { const { file, onChange, disabled, className } = props; return ( - <div - className={classNames("timeline-edit-image-container", className)} - > + <div className={classNames("timeline-edit-image-container", className)}> <input type="file" accept="image/*" @@ -28,9 +28,9 @@ export default function ImagePostEdit(props: TimelinePostEditImageProps) { onChange(files[0]); } }} - className="mx-3 my-1" + className="timeline-edit-image-input" /> - {file && <BlobImage src={file} className="timeline-edit-image" />} + {file && <BlobImage src={file} className="timeline-edit-image-image" />} </div> ); } diff --git a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css index 33a77943..c5b41b40 100644 --- a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css +++ b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css @@ -1,34 +1,24 @@ -.timeline-markdown-post-edit-page {
- overflow: auto;
- max-height: 300px;
+.timeline-edit-markdown-tab-page {
+ min-height: 8em;
+ display: flex;
}
-.timeline-post-create-markdown-edit-area {
- border: 1px solid var(--cru-clickable-primary-normal-color);
- border-top: none;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
- padding: 0.6em;
+.timeline-edit-markdown-text {
+ width: 100%;
}
-.timeline-post-create-markdown-edit-area:hover {
- border: 1px solid var(--cru-clickable-primary-normal-color);
- border-top: none;
+.timeline-edit-markdown-images {
+ display: flex;
+ flex-wrap: wrap;
}
-.timeline-markdown-post-edit-image-container {
- position: relative;
- text-align: center;
- margin-bottom: 1em;
+.timeline-edit-markdown-images img {
+ max-width: 100%;
+ max-height: 200px;
}
-.timeline-markdown-post-edit-image {
+.timeline-edit-markdown-preview img {
max-width: 100%;
max-height: 200px;
}
-.timeline-markdown-post-edit-image-delete-button {
- position: absolute;
- right: 10px;
- top: 2px;
-}
diff --git a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx index 0dfaf33e..692221fd 100644 --- a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx +++ b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx @@ -27,7 +27,7 @@ class MarkedRenderer extends marked.Renderer { } } - return this.image(href, title, text); + return super.image(href, title, text); } } @@ -136,6 +136,7 @@ export function MarkdownPostEdit({ return ( <TabPages className={className} + pageContainerClassName="timeline-edit-markdown-tab-page" dense pages={[ { diff --git a/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css b/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css index 4a608304..d1a61793 100644 --- a/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css +++ b/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css @@ -1,19 +1,12 @@ -.timeline-edit-plain-text-input { +.timeline-edit-plain-text-container { width: 100%; height: 100%; - background-color: var(--cru-background-color); - color: var(--cru-text-major-color); - border: 1px solid var(--cru-text-major-color); - padding: 0.5em; - border-radius: 5px; - transition: border-color 0.5s; -} - -.timeline-edit-plain-text-input:hover { - border-color: var(--cru-clickable-secondary-normal-color); } -.timeline-edit-plain-text-input:focus { - border-color: var(--cru-clickable-secondary-normal-color); +.timeline-edit-plain-text-input { + width: 100%; + height: 100%; + padding: 0.5em; + border-radius: 4px; } diff --git a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css index 5e93d9f2..6efe93e9 100644 --- a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css +++ b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css @@ -10,7 +10,7 @@ padding-top: 60px;
}
- .timeline-post-create-card{
+ .timeline-post-create-card {
margin-right: 0;
}
}
@@ -23,11 +23,13 @@ flex-grow: 1;
}
-
-
.timeline-post-create-right-area {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 1em;
}
+
+.timeline-post-create-send {
+ margin-top: auto;
+}
diff --git a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx index 0de75ccd..c0a80ad0 100644 --- a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx +++ b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx @@ -104,6 +104,7 @@ function TimelinePostEdit(props: TimelinePostEditProps) { throw new UiLogicError(); } requestDataList = await mdBuild(); + break; default: throw new UiLogicError("Unknown content type."); } @@ -174,6 +175,7 @@ function TimelinePostEdit(props: TimelinePostEditProps) { <IconButton color="primary" icon={postKindIconMap[kind]} /> </PopupMenu> <LoadingButton + className="timeline-post-create-send" onClick={() => void onSend()} color="primary" disabled={!canSend} |