better style for editor

KnowledgeCaptureAndDiscovery · Feb 17, 2024 · a96b3bd · a96b3bd
1 parent 30c799f
commit a96b3bd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/DataQuery/DataQueryTemplateForm.tsx b/src/components/DataQuery/DataQueryTemplateForm.tsx
@@ -113,7 +113,7 @@ export const DataQueryTemplateForm = ({value,onChange, showErrors}:DataQueryTemp
                 <CodeMirror value={QUERY_HEADER}
                     extensions={[StreamLanguage.define(sparql)]}
                     readOnly
-                    className="cm-readonly"
+                    className={"cm-readonly header" + (lastLine>11 ? " bigger" : "")}
                 />
                 <CodeMirror value={template}
                     extensions={[
@@ -128,7 +128,7 @@ export const DataQueryTemplateForm = ({value,onChange, showErrors}:DataQueryTemp
                         lineNumbers({formatNumber: (lineNo:number, state: EditorState) => `${lastLine}`})
                     ]}
                     readOnly
-                    className="cm-readonly"
+                    className={"cm-readonly footer " + (lastLine>11 ? "bigger" : "")}
                 />
             </Card>
         </Box>

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -24,6 +24,14 @@ code {
   background: transparent !important;
 }
 
-.cm-readonly * .cm-gutters {
+.cm-readonly.header * .cm-gutters {
   padding-left: 7px !important;
+}
+
+.cm-readonly.header.bigger * .cm-gutters {
+  padding-left: 16px !important;
+}
+
+.cm-readonly.footer.bigger * .cm-gutters {
+  padding-left: 9px !important;
 }