solara/lib/core/dashboard/component/MessageBottomSheet.js in solara-0.2.2 vs solara/lib/core/dashboard/component/MessageBottomSheet.js in solara-0.2.3
- old
+ new
@@ -1,57 +1,57 @@
class MessageBottomSheet extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
- <style>
- .message-bottom-sheet {
- display: none;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: white;
- border-top-left-radius: 20px;
- border-top-right-radius: 20px;
- box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
- z-index: 1000;
- padding: 20px;
- transition: transform 0.3s ease-out;
- transform: translateY(100%);
- max-width: 1000px;
- margin: 0 auto;
- width: 100%;
- }
- .message-bottom-sheet.show {
- transform: translateY(0);
- }
- .message-content {
- max-height: 300px; /* Set a maximum height */
- overflow-y: auto; /* Enable vertical scrolling */
- margin-bottom: 20px;
- }
- .close-message {
- width: 10%;
- margin: 20px;
- padding: 10px;
- background-color: var(--primary-color);
- color: white;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- }
-
- .close-message:hover {
- background-color: #0056b3; /* Darker shade on hover */
- }
- </style>
- <div class="message-bottom-sheet" id="messageBottomSheet">
- <div class="message-content" id="messageContent"></div>
- <button class="close-message" id="closeMessage">Close</button>
- </div>
- <div id="overlay" class="overlay" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999;"></div>
- `;
+ <style>
+ .message-bottom-sheet {
+ display: none;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: white;
+ border-top-left-radius: 14px;
+ border-top-right-radius: 14px;
+ box-shadow: 0 -1.4px 7px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ padding: 14px;
+ transition: transform 0.3s ease-out;
+ transform: translateY(100%);
+ max-width: 700px;
+ margin: 0 auto;
+ width: 100%;
+ }
+ .message-bottom-sheet.show {
+ transform: translateY(0);
+ }
+ .message-content {
+ max-height: 210px; /* Reduced from 300px */
+ overflow-y: auto;
+ margin-bottom: 14px;
+ }
+ .close-message {
+ width: 7%;
+ margin: 14px;
+ padding: 7px;
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 3.5px;
+ cursor: pointer;
+ font-size: 11.2px;
+ }
+ .close-message:hover {
+ background-color: #0056b3;
+ }
+</style>
+<div class="message-bottom-sheet" id="messageBottomSheet">
+ <div class="message-content" id="messageContent"></div>
+ <button class="close-message" id="closeMessage">Close</button>
+</div>
+<div id="overlay" class="overlay" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999;"></div>
+ `;
this.messageBottomSheet = this.shadowRoot.getElementById('messageBottomSheet');
this.messageContent = this.shadowRoot.getElementById('messageContent');
this.closeMessageButton = this.shadowRoot.getElementById('closeMessage');
this.overlay = this.shadowRoot.getElementById('overlay');
\ No newline at end of file