misc: 500px 모드를 일관되게 적용.

- media-1000px, media-500px 추가

hwe/scss/common/bootstrap5.scss

@@ -7,6 +7,7 @@ $input-color: #303030;
 
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
 
+@import "./break_500px.scss";
 @import "./variables.scss";
 @import "./bootswatch_custom_variables.scss";
 @import "bootstrap/scss/bootstrap.scss";

hwe/scss/common/break_500px.scss

@@ -13,3 +13,15 @@ $grid-breakpoints: (
   xl: 1200px,
   xxl: 1400px
 );
+
+@mixin media-1000px{
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
+    @content;
+  }
+}
+
+@mixin media-500px{
+  @media (max-width: calc(map-get($grid-breakpoints, 'md') - .02px)) {
+    @content;
+  }
+}

hwe/scss/main.scss

@@ -1,6 +1,6 @@
-@import "./common/break_500px.scss";
 @import "./common/bootstrap5.scss";
 @import "./editor_component.scss";
+@import "./util.scss";
 body {
     color: white;
     background-color: black;
@@ -10,14 +10,14 @@ body {
     background-repeat: repeat-y;
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #container {
         width: 1000px;
         margin: 0 auto;
     }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     body {
         overflow-x: hidden;
     }
@@ -120,7 +120,7 @@ body {
     text-overflow: ellipsis;
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #map_view {
         grid-template-columns: 500px 200px 300px;
         grid-template-rows: 520px 130px;
@@ -220,7 +220,7 @@ body {
     overflow: hidden;
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     .buttonPlate {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
@@ -396,7 +396,7 @@ body {
 
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #message_board section {
         overflow-y: auto;
         overflow-x: hidden;
@@ -412,7 +412,7 @@ body {
     }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
 
     #message_board .message_input_form {
         position: -webkit-sticky;
@@ -537,7 +537,7 @@ body {
 }
 
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     #mailbox_list-col {
         order: 1;
     }
@@ -588,13 +588,13 @@ body {
 }
 
 
-@include media-breakpoint-up(md) {
+@include media-1000px {
     #float-tabs {
         display: none;
     }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
     #float-tabs {
         position: fixed;
         right: -1rem;
@@ -629,17 +629,3 @@ body {
         }
     }
 }
-
-
-.s-border-t {
-    border-top: gray solid 1px;
-}
-
-.s-border-b {
-    border-bottom: gray solid 1px;
-}
-
-.s-border-tb {
-    border-top: gray solid 1px;
-    border-bottom: gray solid 1px;
-}

hwe/scss/myPage.scss

@@ -1,9 +1,7 @@
-
-@import "./common/break_500px.scss";
 @import "./common/bootstrap5.scss";
 @import "./common_legacy.scss";
 
-@include media-breakpoint-up(md) {
+@include media-1000px{
     #container {
         width: 1000px;
         margin: 0 auto;
@@ -17,10 +15,7 @@
 
     }
 }
-
+@include media-500px{
-
-
-@include media-breakpoint-down(md) {
     body {
         overflow-x: hidden;
     }

hwe/scss/processing.scss

@@ -1,7 +1,7 @@
-@import "./common/break_500px.scss";
 @import "./common/bootstrap5.scss";
 @import "./editor_component.scss";
 @import "./common_legacy.scss";
+@import "./util.scss";
 
 #amount {
     width: 100px;
@@ -16,15 +16,14 @@
 }
 
 
-@include media-breakpoint-up(md) {
+@include media-1000px{
     #container {
         width: 1000px;
         margin: 0 auto;
     }
 }
 
-
+@include media-500px{
-@include media-breakpoint-down(md) {
     body {
         overflow-x: hidden;
     }

hwe/scss/util.scss

@@ -0,0 +1,14 @@
+
+
+.s-border-t {
+    border-top: gray solid 1px;
+}
+
+.s-border-b {
+    border-bottom: gray solid 1px;
+}
+
+.s-border-tb {
+    border-top: gray solid 1px;
+    border-bottom: gray solid 1px;
+}

hwe/ts/PartialReservedCommand.vue

@@ -548,7 +548,6 @@ export default defineComponent({
 @import "@scss/common/break_500px.scss";
 @import "@scss/common/variables.scss";
 @import "@scss/common/bootswatch_custom_variables.scss";
-@import "bootstrap/scss/bootstrap-utilities.scss";
 
 .commandPad {
   background-color: $gray-900;
@@ -561,7 +560,7 @@ export default defineComponent({
   //30, 70, 37.65, 160
 }
 
-@include media-breakpoint-up(md) {
+@include media-1000px{
   .commandPad {
     margin-left: 10px;
 
@@ -583,7 +582,7 @@ export default defineComponent({
   }
 }
 
-@include media-breakpoint-down(md) {
+@include media-500px {
   .dropdown-item {
     padding: 8px;
   }

hwe/ts/processing/GeneralSelect.vue

@@ -160,6 +160,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import "@scss/common/break_500px.scss";
 @import "@scss/common/variables.scss";
 @import "@scss/common/bootswatch_custom_variables.scss";
 @import "bootstrap/scss/bootstrap-utilities.scss";