diff options
Diffstat (limited to 'FrontEnd/src/views/timeline-common')
4 files changed, 35 insertions, 32 deletions
diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.css b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.css new file mode 100644 index 00000000..a303b227 --- /dev/null +++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.css @@ -0,0 +1,21 @@ +.timeline-markdown-post-edit-page {
+ overflow: scroll;
+ max-height: 300px;
+}
+
+.timeline-markdown-post-edit-image-container {
+ position: relative;
+ text-align: center;
+ margin-bottom: 1em;
+}
+
+.timeline-markdown-post-edit-image {
+ max-width: 100%;
+ max-height: 200px;
+}
+
+.timeline-markdown-post-edit-image-delete-button {
+ position: absolute;
+ right: 10px;
+ top: 2px;
+}
diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx index b16bf43d..0066701f 100644 --- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx +++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx @@ -13,6 +13,8 @@ import TabPages from "../common/tab/TabPages"; import ConfirmDialog from "../common/dailog/ConfirmDialog"; import Spinner from "../common/Spinner"; +import "./MarkdownPostEdit.css"; + export interface MarkdownPostEditProps { timeline: string; onPosted: (post: HttpTimelinePostInfo) => void; @@ -102,6 +104,7 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ className={className} style={style} pageContainerClassName="py-2" + dense actions={ process ? ( <Spinner /> @@ -125,12 +128,13 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ } pages={[ { - id: "text", - tabText: "edit", + name: "text", + text: "edit", page: ( <textarea value={text} disabled={process} + className="cru-fill-parent" onChange={(event) => { getBuilder().setMarkdownText(event.currentTarget.value); }} @@ -138,8 +142,8 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ ), }, { - id: "images", - tabText: "image", + name: "images", + text: "image", page: ( <div className="timeline-markdown-post-edit-page"> {images.map((image, index) => ( @@ -177,8 +181,8 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({ ), }, { - id: "preview", - tabText: "preview", + name: "preview", + text: "preview", page: ( <div className="markdown-container timeline-markdown-post-edit-page" diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.css b/FrontEnd/src/views/timeline-common/TimelinePostEdit.css index 0c7deaa2..4ce98383 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.css +++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.css @@ -9,7 +9,7 @@ }
.timeline-post-edit {
- position: sticky;
+ position: sticky !important;
bottom: 0;
z-index: 1;
}
@@ -18,25 +18,3 @@ max-width: 100px;
max-height: 100px;
}
-
-.timeline-markdown-post-edit-page {
- overflow: scroll;
- max-height: 300px;
-}
-
-.timeline-markdown-post-edit-image-container {
- position: relative;
- text-align: center;
- margin-bottom: 1em;
-}
-
-.timeline-markdown-post-edit-image {
- max-width: 100%;
- max-height: 200px;
-}
-
-.timeline-markdown-post-edit-image-delete-button {
- position: absolute;
- right: 10px;
- top: 2px;
-}
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx index e2045429..9c48c7c8 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx @@ -203,7 +203,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { <Card className="timeline-item-card"> {showMarkdown ? ( <MarkdownPostEdit - className="w-100" + className="cru-fill-parent" onClose={() => setShowMarkdown(false)} timeline={timeline.name} onPosted={onPosted} @@ -216,7 +216,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { if (kind === "text") { return ( <TimelinePostEditText - className="w-100 h-100 timeline-post-edit" + className="cru-fill-parent timeline-post-edit" text={text} disabled={process} onChange={(t) => { @@ -239,7 +239,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => { })()} </div> <div className="col col-auto align-self-end m-1"> - <div className="d-block text-center mt-1 mb-2"> + <div className="d-block cru-text-center mt-1 mb-2"> <PopupMenu items={(["text", "image", "markdown"] as const).map( (kind) => ({ |