fix
This commit is contained in:
147
my-blog/static/oauth/assets/comment-atproto-DM4cKW_4.js
Normal file
147
my-blog/static/oauth/assets/comment-atproto-DM4cKW_4.js
Normal file
File diff suppressed because one or more lines are too long
1
my-blog/static/oauth/assets/comment-atproto-DqMzdkKk.css
Normal file
1
my-blog/static/oauth/assets/comment-atproto-DqMzdkKk.css
Normal file
File diff suppressed because one or more lines are too long
3
my-blog/static/oauth/index.html
Normal file
3
my-blog/static/oauth/index.html
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<!-- OAuth Comment System - Load globally for session management -->
|
||||||
|
<script type="module" crossorigin src="/assets/comment-atproto-DM4cKW_4.js"></script>
|
||||||
|
<link rel="stylesheet" crossorigin href="/assets/comment-atproto-DqMzdkKk.css">
|
||||||
@@ -52,6 +52,11 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* When no user profile, center the actions */
|
||||||
|
.oauth-header-content:has(.oauth-header-actions-full) {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.oauth-app-title {
|
.oauth-app-title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
@@ -62,10 +67,15 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.oauth-header-actions-full {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* OAuth User Profile in Header */
|
/* OAuth User Profile in Header */
|
||||||
.oauth-user-profile {
|
.oauth-user-profile {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -674,53 +684,35 @@ body {
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive Mobile CSS - Following oauth_old and my-blog patterns */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 1000px) {
|
||||||
.main-content {
|
/* Base mobile styles to prevent overflow */
|
||||||
max-width: 100%;
|
* {
|
||||||
|
max-width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-area {
|
/* OAuth app header mobile fixes */
|
||||||
border-left: none;
|
.oauth-app-header {
|
||||||
border-right: none;
|
padding: 0px !important;
|
||||||
|
margin: 0px !important;
|
||||||
|
border: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.oauth-header-content {
|
||||||
margin: 0;
|
max-width: 100% !important;
|
||||||
border-radius: 0;
|
padding: 10px 20px !important;
|
||||||
border-left: none;
|
margin: 0px !important;
|
||||||
border-right: none;
|
flex-direction: row !important;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header {
|
/* User profile mobile adjustments */
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-actions {
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-btn {
|
|
||||||
padding: 12px 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.record-item {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-container {
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* OAuth User Profile Mobile */
|
|
||||||
.oauth-user-profile {
|
.oauth-user-profile {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-avatar-section .profile-avatar,
|
.profile-avatar-section .profile-avatar,
|
||||||
@@ -742,15 +734,187 @@ body {
|
|||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oauth-header-content {
|
.oauth-header-actions {
|
||||||
flex-direction: column;
|
width: auto !important;
|
||||||
gap: 12px;
|
max-width: 100% !important;
|
||||||
align-items: flex-start;
|
overflow: hidden !important;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.oauth-header-actions {
|
.oauth-header-actions-full {
|
||||||
width: 100%;
|
width: 100% !important;
|
||||||
justify-content: center;
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main content mobile optimization */
|
||||||
|
.main-content {
|
||||||
|
max-width: 100% !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-area {
|
||||||
|
border-left: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
padding: 0px !important;
|
||||||
|
margin: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card and container mobile styles */
|
||||||
|
.card {
|
||||||
|
margin: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
border-left: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-form {
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Record items mobile */
|
||||||
|
.record-item {
|
||||||
|
padding: 15px !important;
|
||||||
|
margin: 0px !important;
|
||||||
|
border-left: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-content {
|
||||||
|
word-wrap: break-word !important;
|
||||||
|
overflow-wrap: break-word !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-meta {
|
||||||
|
word-break: break-all !important;
|
||||||
|
overflow-wrap: break-word !important;
|
||||||
|
flex-wrap: wrap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-url {
|
||||||
|
word-break: break-all !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form elements mobile */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input, .form-textarea {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
padding: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Auth section mobile */
|
||||||
|
.auth-section {
|
||||||
|
padding: 0px !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-section.search-bar-layout {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
flex-direction: row !important;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-section.search-bar-layout .handle-input {
|
||||||
|
max-width: calc(100% - 80px) !important;
|
||||||
|
width: calc(100% - 80px) !important;
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-button {
|
||||||
|
white-space: nowrap !important;
|
||||||
|
min-width: 70px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs mobile */
|
||||||
|
.tab-header {
|
||||||
|
overflow-x: auto !important;
|
||||||
|
-webkit-overflow-scrolling: touch !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-btn {
|
||||||
|
white-space: nowrap !important;
|
||||||
|
min-width: auto !important;
|
||||||
|
padding: 12px 16px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* JSON display mobile */
|
||||||
|
.json-content {
|
||||||
|
font-size: 10px !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
-webkit-overflow-scrolling: touch !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ask AI mobile */
|
||||||
|
.ask-ai-container {
|
||||||
|
margin: 0px !important;
|
||||||
|
border-radius: 0px !important;
|
||||||
|
border-left: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
height: 250px !important;
|
||||||
|
padding: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-form {
|
||||||
|
padding: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container {
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-input {
|
||||||
|
width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 44px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons mobile */
|
||||||
|
.btn {
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utilities */
|
||||||
|
button {
|
||||||
|
max-width: 100%;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comment meta mobile - fix overflow */
|
||||||
|
.comment-meta {
|
||||||
|
word-break: break-all !important;
|
||||||
|
overflow-wrap: break-word !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Message content mobile */
|
||||||
|
.message-content {
|
||||||
|
word-wrap: break-word !important;
|
||||||
|
overflow-wrap: break-word !important;
|
||||||
|
white-space: pre-wrap !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -152,42 +152,53 @@ export default function App() {
|
|||||||
<div className="app">
|
<div className="app">
|
||||||
<header className="oauth-app-header">
|
<header className="oauth-app-header">
|
||||||
<div className="oauth-header-content">
|
<div className="oauth-header-content">
|
||||||
{user && (
|
{user ? (
|
||||||
<div className="oauth-user-profile">
|
<>
|
||||||
<div className="profile-avatar-section">
|
<div className="oauth-user-profile">
|
||||||
{user.avatar ? (
|
<div className="profile-avatar-section">
|
||||||
<img
|
{user.avatar ? (
|
||||||
src={user.avatar}
|
<img
|
||||||
alt={user.displayName || user.handle}
|
src={user.avatar}
|
||||||
className="profile-avatar"
|
alt={user.displayName || user.handle}
|
||||||
/>
|
className="profile-avatar"
|
||||||
) : (
|
/>
|
||||||
<div className="profile-avatar-fallback">
|
) : (
|
||||||
{(user.displayName || user.handle || '?').charAt(0).toUpperCase()}
|
<div className="profile-avatar-fallback">
|
||||||
|
{(user.displayName || user.handle || '?').charAt(0).toUpperCase()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="profile-info">
|
||||||
|
<div className="profile-display-name">
|
||||||
|
{user.displayName || user.handle}
|
||||||
|
</div>
|
||||||
|
<div className="profile-handle">
|
||||||
|
@{user.handle}
|
||||||
|
</div>
|
||||||
|
<div className="profile-did">
|
||||||
|
{user.did}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="profile-info">
|
|
||||||
<div className="profile-display-name">
|
|
||||||
{user.displayName || user.handle}
|
|
||||||
</div>
|
|
||||||
<div className="profile-handle">
|
|
||||||
@{user.handle}
|
|
||||||
</div>
|
|
||||||
<div className="profile-did">
|
|
||||||
{user.did}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="oauth-header-actions">
|
||||||
|
<AuthButton
|
||||||
|
user={user}
|
||||||
|
onLogin={login}
|
||||||
|
onLogout={logout}
|
||||||
|
loading={authLoading}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="oauth-header-actions oauth-header-actions-full">
|
||||||
|
<AuthButton
|
||||||
|
user={user}
|
||||||
|
onLogin={login}
|
||||||
|
onLogout={logout}
|
||||||
|
loading={authLoading}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="oauth-header-actions">
|
|
||||||
<AuthButton
|
|
||||||
user={user}
|
|
||||||
onLogin={login}
|
|
||||||
onLogout={logout}
|
|
||||||
loading={authLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user