[MOV] content/*: move resource files into their related page's directory

Since odoo/documentation#903, the guideline for the location of new
resource (images, downloadable files, RST includes...) files is to place
those inside the directory of the RST page that references them.

For example, if `doc1.rst` has a reference to `image.png` and to
`download.zip`, the file structure should look like this:

├── parent_doc/
│     └── doc1/
│     │     └── image.png
│     │     └── download.zip
│     └── doc1.rst
│     └── doc2.rst
├── parent_doc.rst

Before this commit, most of the resource files were still located inside
'media' directories holding all the resource files referenced by RST
pages located at the same level as these directories. In the example
above, a single 'media' directory would hold all the resource files
referenced by both `doc1.rst` and `doc2.rst`. Doing so prevented us from
figuring out easily which resource file was referenced by which RST page
and, thus, lead to unused resource files piling up in the repository. It
also made it more complicated to define codeowners regex rules because a
team could not simply be assigned to `/some_page.*` but needed to be
assigned to both `/some_page\.rst` and to the location of 'media'.

In order to help new content writers figure out the guideline when
taking examples from other RST pages, this commit retroactively applies
the guideline to existing resource files and 'media' directories. The
left-over resource files that are not referenced by any RST page are
removed.

task-2497965

Part-of: odoo/documentation#2068

content/developer/reference/frontend/mobile.rst

@@ -26,7 +26,7 @@ How does it work?
 
 Internal workings of the mobile application:
 
-.. image:: images/mobile_working.jpg
+.. image:: mobile/mobile_working.jpg
 
 Of course, it is a web page that loads on a Mobile Native Web container. But it
 is integrated in such a way that you can access native resources from your web
@@ -50,7 +50,7 @@ How to use it?
 Just like the Odoo Web Framework, the Mobile API can be used anywhere by getting the object from
 **web_mobile.rpc**
 
-.. image:: images/odoo_mobile_api.png
+.. image:: mobile/odoo_mobile_api.png
 
 The mobile RPC object provides a list of methods that are available (this only works with the mobile
 app). 
@@ -78,7 +78,7 @@ remains visible and interactive.
 
 	mobile.methods.showToast({'message': 'Message sent'});
 
-.. image:: images/toast.png
+.. image:: mobile/toast.png
 
 
 Vibrating device
@@ -119,7 +119,7 @@ displayed at a time.
 		}
 	});
 
-.. image:: images/snackbar.png
+.. image:: mobile/snackbar.png
 
 Showing notification
 .....................
@@ -139,7 +139,7 @@ view at any time.
 	
 	mobile.showNotification({'title': 'Simple Notification', 'message': 'This is a test for a simple notification'})
 
-.. image:: images/mobile_notification.png
+.. image:: mobile/mobile_notification.png
 
 
 Create contact in device
@@ -173,7 +173,7 @@ Create a new device contact with the given contact details.
 
 	mobile.methods.addContact(contact);
 
-.. image:: images/mobile_contact_create.png
+.. image:: mobile/mobile_contact_create.png
 
 Scanning barcodes
 ..................
@@ -208,4 +208,4 @@ Use switchAccount to switch from one account to another on the device.
 	
 	mobile.methods.switchAccount();
 
-.. image:: images/mobile_switch_account.png
+.. image:: mobile/mobile_switch_account.png

content/developer/reference/frontend/owl_components.rst

@@ -195,7 +195,7 @@ element might be swipable or not.
 
 You can use the component to interact easily with records, messages, items in lists and much more.
 
-.. image:: ./images/actionswiper.png
+.. image:: owl_components/actionswiper.png
   :width: 400 px
   :alt: Example of ActionSwiper usage
   :align: center

content/developer/reference/frontend/services.rst

@@ -188,7 +188,7 @@ Effects are graphical elements that can be temporarily displayed on top of the p
 
 A good example would be the rainbow man:
 
-.. image:: images/rainbow_man.png
+.. image:: services/rainbow_man.png
     :alt: The rainbow man effect
     :width: 600
     :align: center
@@ -348,7 +348,7 @@ Here, it is called in webclient.js to make it visible everywhere for the example
   const effectService = useService("effect");
   effectService.add({ type: "sepia" });
 
-.. image:: images/odoo_sepia.png
+.. image:: services/odoo_sepia.png
     :alt: Odoo in sepia
     :width: 600
     :align: center
@@ -500,7 +500,7 @@ A notification for when a sale deal is made with a button to go some kind of com
     ],
   });
 
-.. image:: images/notification_service.png
+.. image:: services/notification_service.png
   :width: 600 px
   :alt: Example of notification
   :align: center