Merge branch 'browser_popup'

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 3ec52d0a6cabc747adfbe4ebaa401086e48bd441..0018f59ea6869192d6c0bbda4b20f0d39f6e6c1b 100644 (file)
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -306,7 +306,7 @@ pre {
 }
 
 .show-input {
-  width: 13em !important;
+  width: 13vw !important;
 }
 .hide-input {
   background: transparent !important;

diff --git a/src/server/index.tsx b/src/server/index.tsx
index fbac4ee1ac72e67d92d70add2b08a5251ddf7612..d4a73a1babcaf9f41b640910be27447e21f9af81 100644 (file)
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@@ -33,7 +33,7 @@ if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
   server.use(function (_req, res, next) {
     res.setHeader(
       "Content-Security-Policy",
-      `default-src 'none'; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'`
+      `default-src 'none'; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *`
     );
     next();
   });

diff --git a/src/shared/components/app/footer.tsx b/src/shared/components/app/footer.tsx
index f2a5e83c916ccb9734a32c2b3d7222551b3c9c00..b40d7285b3c85458aeb1d75cc06327bd8d57deca 100644 (file)
--- a/src/shared/components/app/footer.tsx
+++ b/src/shared/components/app/footer.tsx
@@ -16,7 +16,7 @@ export class Footer extends Component<FooterProps, any> {
 
   render() {
     return (
-      <nav className="container navbar navbar-expand-md navbar-light navbar-bg p-3">
+      <nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
         <div className="navbar-collapse">
           <ul className="navbar-nav ml-auto">
             {this.props.site.version !== VERSION && (

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index d6bc7727db2ccee4b036fd170209160cb766011c..4607b5adfcfa81b34dea6727ef6f23e6124c1f1d 100644 (file)
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -146,7 +146,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
   navbar() {
     return (
       <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3">
-        <div className="container">
+        <div className="container-lg">
           {this.props.siteRes.site_view.match({
             some: siteView => (
               <NavLink
@@ -314,35 +314,39 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             {!this.context.router.history.location.pathname.match(
               /^\/search/
             ) && (
-              <form
-                className="form-inline mr-2"
-                onSubmit={linkEvent(this, this.handleSearchSubmit)}
-              >
-                <input
-                  id="search-input"
-                  className={`form-control mr-0 search-input ${
-                    this.state.toggleSearch ? "show-input" : "hide-input"
-                  }`}
-                  onInput={linkEvent(this, this.handleSearchParam)}
-                  value={this.state.searchParam}
-                  ref={this.searchTextField}
-                  type="text"
-                  placeholder={i18n.t("search")}
-                  onBlur={linkEvent(this, this.handleSearchBlur)}
-                ></input>
-                <label className="sr-only" htmlFor="search-input">
-                  {i18n.t("search")}
-                </label>
-                <button
-                  name="search-btn"
-                  onClick={linkEvent(this, this.handleSearchBtn)}
-                  className="px-1 btn btn-link"
-                  style="color: var(--gray)"
-                  aria-label={i18n.t("search")}
-                >
-                  <Icon icon="search" />
-                </button>
-              </form>
+              <ul className="navbar-nav">
+                <li className="nav-item">
+                  <form
+                    className="form-inline mr-1"
+                    onSubmit={linkEvent(this, this.handleSearchSubmit)}
+                  >
+                    <input
+                      id="search-input"
+                      className={`form-control mr-0 search-input ${
+                        this.state.toggleSearch ? "show-input" : "hide-input"
+                      }`}
+                      onInput={linkEvent(this, this.handleSearchParam)}
+                      value={this.state.searchParam}
+                      ref={this.searchTextField}
+                      disabled={!this.state.toggleSearch}
+                      type="text"
+                      placeholder={i18n.t("search")}
+                      onBlur={linkEvent(this, this.handleSearchBlur)}
+                    ></input>
+                    <label className="sr-only" htmlFor="search-input">
+                      {i18n.t("search")}
+                    </label>
+                    <button
+                      name="search-btn"
+                      onClick={linkEvent(this, this.handleSearchBtn)}
+                      className="px-1 btn btn-link nav-link"
+                      aria-label={i18n.t("search")}
+                    >
+                      <Icon icon="search" />
+                    </button>
+                  </form>
+                </li>
+              </ul>
             )}
             {UserService.Instance.myUserInfo.isSome() ? (
               <>

diff --git a/src/shared/components/app/no-match.tsx b/src/shared/components/app/no-match.tsx
index 45ba65e99879177436cac141660b585d5406a86d..bf0eb6a895ed2b2baffdd9264ff21b0d5eec6f40 100644 (file)
--- a/src/shared/components/app/no-match.tsx
+++ b/src/shared/components/app/no-match.tsx
@@ -13,7 +13,7 @@ export class NoMatch extends Component<any, any> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <h1>404</h1>
         {this.errCode && (
           <h3>

diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 95e593efb7d5aac44462b2f42ce8c518b0870df3..25eb2a5f953690e2f7f068debad11f3a745ec394 100644 (file)
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -117,7 +117,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 82049100f60205ce772114e72685ce6ea91030f3..f01c584429b1dea517b5f8b581baab16849c9fd2 100644 (file)
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -283,7 +283,7 @@ export class Community extends Component<any, State> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         {this.state.communityLoading ? (
           <h5>
             <Spinner large />

diff --git a/src/shared/components/community/create-community.tsx b/src/shared/components/community/create-community.tsx
index 8aed56b12eb61ef3dc8c6fe91d4e6bb78328ceea..66bbe946183dd1c805384bbbed3d2489e330bab3 100644 (file)
--- a/src/shared/components/community/create-community.tsx
+++ b/src/shared/components/community/create-community.tsx
@@ -56,7 +56,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index 011a5767ac9e164465382858de2c2efcf14a6ee7..be244e550ca9aa5cb559e6f11dcaf3745fec0e32 100644 (file)
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -104,7 +104,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         {this.state.loading ? (
           <h5>
             <Spinner large />

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 3d163197fff63a4a0ee9010a740965baaaa2ff34..21db06c400724770b52662f39f4ea9b7c6fdc1e8 100644 (file)
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -322,7 +322,7 @@ export class Home extends Component<any, HomeState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx
index f473ffa17446027559d04a8efa827aec5c866b27..bd56c484eb60d2e1c36e1224de696bf78afb9627 100644 (file)
--- a/src/shared/components/home/instances.tsx
+++ b/src/shared/components/home/instances.tsx
@@ -30,7 +30,7 @@ export class Instances extends Component<any, InstancesState> {
   render() {
     return this.state.siteRes.federated_instances.match({
       some: federated_instances => (
-        <div className="container">
+        <div className="container-lg">
           <HtmlTags
             title={this.documentTitle}
             path={this.context.router.route.match.url}

diff --git a/src/shared/components/home/legal.tsx b/src/shared/components/home/legal.tsx
index 78c9bbba8ddfe87dc974405594016c9098a453ef..bd07c406a386336f604e7783a66cedf59d2c7e8a 100644 (file)
--- a/src/shared/components/home/legal.tsx
+++ b/src/shared/components/home/legal.tsx
@@ -26,7 +26,7 @@ export class Legal extends Component<any, LegalState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 001cfd4c99aec1f030aff5a4f86171b617e2ce87..4cf9d4a67bbe7c8ff4574cfa187b9d3b1d099a80 100644 (file)
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -81,7 +81,7 @@ export class Login extends Component<any, State> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index 8e1c9fff06a214812a1e904797335fd6c1ee8a15..a288e2a134217989b1a5fbe22ce91854014648e9 100644 (file)
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@@ -67,7 +67,7 @@ export class Setup extends Component<any, State> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <Helmet title={this.documentTitle} />
         <div className="row">
           <div className="col-12 offset-lg-3 col-lg-6">

diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index aa40aa0c38ab2e0cb4be3772896efd7fda9bbc16..53162114b7d418b8dbc9ddfa307d55226471eb97 100644 (file)
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -127,7 +127,7 @@ export class Signup extends Component<any, State> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index 4bbf8180679bf6f19899beae3e60d5901ccaf16b..f34e6f3c448d4e62836f6d4434e558831fd1ac5a 100644 (file)
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -640,7 +640,7 @@ export class Modlog extends Component<any, ModlogState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index cfc4bd7e1f9d9f8b6b8f9f55090951d5f861ca12..67569cb76c7b76b73cca73dedd27c1ba8c85cda7 100644 (file)
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -171,7 +171,7 @@ export class Inbox extends Component<any, InboxState> {
       .ok()
       .map(a => `/feeds/inbox/${a}.xml`);
     return (
-      <div className="container">
+      <div className="container-lg">
         {this.state.loading ? (
           <h5>
             <Spinner large />

diff --git a/src/shared/components/person/password-change.tsx b/src/shared/components/person/password-change.tsx
index 42a287e6d591c43facf3d780fe48ee5c52d5bdbf..a0305f1f7acedf6dfb567190fca2bfdcdcd61e27 100644 (file)
--- a/src/shared/components/person/password-change.tsx
+++ b/src/shared/components/person/password-change.tsx
@@ -66,7 +66,7 @@ export class PasswordChange extends Component<any, State> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index 52e7a93bd17d7370067eef68842ed79b1585407b..2b61a7ca031331d7070ae88dd3531b0201eb86d8 100644 (file)
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -251,7 +251,7 @@ export class Profile extends Component<any, ProfileState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         {this.state.loading ? (
           <h5>
             <Spinner large />

diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index e2ef43467d1831a64d5150358eb2492275f3414e..e70c29d2c4e555fcd001d5ff1d979a2f3045d7ae 100644 (file)
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -113,7 +113,7 @@ export class RegistrationApplications extends Component<
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         {this.state.loading ? (
           <h5>
             <Spinner large />

diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index 85411cc3b4226a89279cc4b4f0355f200f26dd61..58e5ea1d9df38854cc509d66e493ebe29c81e58b 100644 (file)
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@@ -165,7 +165,7 @@ export class Reports extends Component<any, ReportsState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         {this.state.loading ? (
           <h5>
             <Spinner large />

diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 06e460b593bb9dedcec9b812e67891fcf907b01e..070be0d71ff91810d0b4f7a3c30690b852ed1a69 100644 (file)
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -204,7 +204,7 @@ export class Settings extends Component<any, SettingsState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <>
           <HtmlTags
             title={this.documentTitle}

diff --git a/src/shared/components/person/verify-email.tsx b/src/shared/components/person/verify-email.tsx
index e5389584d41e045d44033537542385863fc2e080..7f2f1a355642a2ea98d95d80b4a0175e9f03c331 100644 (file)
--- a/src/shared/components/person/verify-email.tsx
+++ b/src/shared/components/person/verify-email.tsx
@@ -66,7 +66,7 @@ export class VerifyEmail extends Component<any, State> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index 3d3396c040745c9b8dc875f4b3ff2dce5ed4ae6d..0090c7168c6b7a06e022a1acc161d1a7cef03675 100644 (file)
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@@ -127,7 +127,7 @@ export class CreatePost extends Component<any, CreatePostState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index 4dc68fdf0f5df4e590200495a7450b8c02db3f2a..128742b14fb200819cf892bfe5ad3a312a7283bd 100644 (file)
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -76,9 +76,8 @@ export class MetadataCard extends Component<
                             <button
                               className="mt-2 btn btn-secondary text-monospace"
                               onClick={linkEvent(this, this.handleIframeExpand)}
-                              data-tippy-content={i18n.t("expand_here")}
                             >
-                              {this.state.expanded ? "-" : "+"}
+                              {i18n.t("expand_here")}
                             </button>
                           )}
                         </div>
@@ -92,12 +91,7 @@ export class MetadataCard extends Component<
           })}
         {this.state.expanded &&
           post.embed_video_url.match({
-            some: html => (
-              <div
-                className="mt-3 mb-2"
-                dangerouslySetInnerHTML={{ __html: html }}
-              />
-            ),
+            some: video_url => <iframe src={video_url}></iframe>,
             none: <></>,
           })}
       </>

diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index a7ffad5831c1787b2a26c91064503536aebc5287..6f5a6c40f7ad7e86b9c9b42aa4a43f6d4ddc1277 100644 (file)
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -345,7 +345,7 @@ export class Post extends Component<any, PostState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         {this.state.loading ? (
           <h5>
             <Spinner large />

diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index 9cbe47a9f737d723825167036e2b9554f264726f..ae7fb215cabfd44bab52936dc5d2f00a3145cce4 100644 (file)
--- a/src/shared/components/private_message/create-private-message.tsx
+++ b/src/shared/components/private_message/create-private-message.tsx
@@ -119,7 +119,7 @@ export class CreatePrivateMessage extends Component<
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 6712b95d852f34bc99a666a26c58cc668b1fff66..792faac44bf85e593b3e77e7c89254fa58c7bfe4 100644 (file)
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -390,7 +390,7 @@ export class Search extends Component<any, SearchState> {
 
   render() {
     return (
-      <div className="container">
+      <div className="container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}